HTML5

  • Revision slug: HTML/HTML5
  • Revision title: HTML5
  • Revision id: 348709
  • Created:
  • Creator: ashickur_noor
  • Is current revision? না
  • Comment

Revision Content

HTML5 এর উদাহরণ

উদাহরণ সংগ্রহ

সর্বাধুনিক HTML প্রযুক্তির ব্যবহার দেখানো হয়েছে ।

HTML5_Logo_128.png

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

  • এটি HTML এর নতুন সংস্করণ, আরো নতুন elements, attributes এবং behaviors যুক্ত হয়েছে,

  • এবং বৃহত প্রযুক্তি ভান্ডার যা আরো শক্তিশালী এবং নানাবিধ ওয়েব সাইট এবং এপ্লিকেশন তৈরি করার সক্ষমতা দেয়। এই ভান্ডারকে মাঝে মাঝে HTML5 নামে ডাকা হয়  এবং বন্ধু এবং প্রায় ছোট করে করে শুধু HTML5 বলে।

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

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

সিমানটিকস

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

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

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

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

অফলাইন রিসোর্স: এপ্লিকেশন ক্যাশ
ফায়ারফক্স সম্পূর্ণ ভাবে HTML5 অফলাইন রিসোর্স সমর্থন করে। বাকি সবারও একই ধরনের অফলাইন রিসোর্স সমর্থন আছে।
অনলাইন এবং অফলাইন ইভেন্ট
ফায়ারফক্স ৩ WHATWG অনলাইন এবং অফলাইন ইভেন্ট সমর্থন করে, যা একটি এপ্লিকেশন এবং এক্সটেনশন কে সচল ইন্টারনেট সংযোগ আছে কিনা তা পরীক্ষা করার সুযোগ দেয়, সাথে সাথে সংযোগ কি উঠা নামা করছে কিনা তাও পরীক্ষা করে।
WHATWGক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ (এককথায় DOM স্টোরেজ)
ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ ওয়েব এপ্লিকেশন কে ক্লায়েন্ট সাইডে তথ্য সংরক্ষণে সুবিধা দেয়।
IndexedDB
ইহা একটি ওয়েব মান যা একটি উল্লেখযোগ্য পরিমান সাজানো তথ্য ব্রাজারে সংরক্ষণকে বুঝায় এবং ইন্ডেক্স ব্যবহার করে উচ্চ ক্ষমতায় তথ্য অনুসন্ধানের সুবিধা দেয়।
ওয়েব এপ্লিকেশন থেকে ফাইলের ব্যবহার
নতুন HTML5 ফাইল এপিআই গিকোতে যুক্ত হয়েছে, যা ব্যবহারকারী দ্বারা নির্বাচিত স্থানীয় ফাইল ব্যবহার করাকে সম্ভব করেছে। This includes support for selecting multiple files using the {{HTMLElement("input")}} of type file HTML element's new multiple attribute.  FileReader ও আছে এখানে।

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

Using HTML5 audio and video
The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.
WebRTC
This technology, where RTC stands for Real-Time Communication, allow to connect to other people and control videoconferencing directly in the browser, without the need for a plugin or an external application.
Using the Camera API
Allows to use, manipulate and store an image from the computer's camera.
Track and WebVTT
The {{HTMLElement("track")}} element allows subtitles and chapters. WebVTT is a text track format.

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

Canvas Tutorial
Learn about the new {{HTMLElement("canvas")}} element and how to draw graphs and other objects in Firefox
HTML5 text API for <canvas> elements
The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.
WebGL
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.
SVG
An XML-based format of vectorial images that can directly be embdedded in the HTML.
 

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

Web Workers
Allows to delegate JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
XMLHttpRequest Level 2
Allows to fetch asynchronously some parts of the page, allowing it to be display dynamic content, varying according the time and user actions. This is the technology behind Ajax.
JIT-compiling JavaScript engines
The new generation of JavaScript engines are much more powerful , leading to greater performance.
History API
Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.
The contentEditable attribute: transform your website to a wiki!
HTML5 has standardized the contentEditable attribute. Learn more about this feature.
Drag and drop
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
Focus management in HTML
The new HTML5 activeElement and hasFocus attributes are supported.
Web-based protocol handlers
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.
requestAnimationFrame
Allows to control animations rendering to obtain optimal performance.
Fullscreen API
Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
Pointer Lock API
Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.
Online and offline events
In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.

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

Using the Camera API
Allows to use, manipulate and store an image from the computer's camera.
Touch events
Handlers to react to events created by a user pressing touch screens.
Using geolocation
Let browsers locate the position of the user using geolocation.
Detecting device orientation
Let get the information when the device on which runs the browser change orientation. This can be used as an input device (e.g. to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
Pointer Lock API
Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.

সাজসজ্জা

CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification anymore and the different modules are not all at level 3: some are at level 1 and some at level 4, with all the intermediate levels covered.

New background styling features
It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and multiple backgrounds can be set.
More fancy borders
Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.
Animating your style
Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a trigerring event, you can now control mobile elements on your page.
Typography improvement
Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and hyphenation, but also can a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.
New presentational layouts
In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layout, and the CSS flexible box layout.

 

Revision Source

<div class="callout-box">
  <div style="font:normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;">
    HTML5 এর উদাহরণ</div>
  <p><a href="/en-US/demos/tag/tech:html5" title="demos/tag/tech:html5/">উদাহরণ সংগ্রহ</a></p>
  <p>সর্বাধুনিক HTML প্রযুক্তির ব্যবহার দেখানো হয়েছে ।</p>
  <p><a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="internal default" src="/@api/deki/files/6020/=HTML5_Logo_128.png" style="" /></a></p>
</div>
<p><span class="seoSummary"><a href="/en-US/docs/HTML" title="HTML">HTML</a> বলতে যা বুঝায় </span><span class="seoSummary"><strong>HTML5</strong>&nbsp; তার সর্বাধুনিক বিবর্তন</span><span class="seoSummary">। </span>বিষয়টি দুইটি ভিন্ন ধারনা কে প্রতিনিধিত্ব করে :</p>
<div class="note">
  <ul>
    <li>
      <p><span class="seoSummary">এটি HTML এর নতুন সংস্করণ, আরো নতুন elements, attributes এবং behaviors যুক্ত হয়েছে,</span></p>
    </li>
    <li><span class="seoSummary">এবং বৃহত প্রযুক্তি ভান্ডার যা আরো শক্তিশালী এবং নানাবিধ ওয়েব সাইট এবং এপ্লিকেশন তৈরি করার সক্ষমতা দেয়।</span> এই ভান্ডারকে মাঝে মাঝে HTML5 নামে ডাকা হয়&nbsp; এবং বন্ধু এবং প্রায় ছোট করে করে শুধু <em>HTML5</em> বলে।</li>
  </ul>
</div>
<p>সকল উন্মুক্ত ওয়েব ডেভলপারদের ব্যবহার উপযোগী করা সাজানো হয়েছে, এই পৃষ্ঠায় অসংখ্যা HTML5 প্রযুক্তির তথ্য সমৃদ্ধ পৃষ্ঠার লিংক দেওয়া আছে, কার্যকরিতার উপর ভিত্তি করে বিভিন্ন দলে বিভক্ত করা হয়েছে।</p>
<ul>
  <li><em>সিমানটিকস</em>: আপনার বিষয়বস্তু সম্পর্কে আপনাকে আরো যথাযথ ভাবে বর্ণনা করার সুযোগ দিবে।</li>
  <li><em>কানেক্টিভিটি</em>: সার্ভারের সাথে যোগাযোগ করতে আপনাকে নতুন নতুন পথ দেখাবে।</li>
  <li><em>অফলাইন এবং স্টোরেজ</em>: ক্লায়েন্ট সাইডে স্থানীয়ভাবে ওয়েবপেইজের তথ্য সংরক্ষণ করার সক্ষমতা দিবে এবং অফলাইনে তা ব্যবহার করতে আরো কার্যকরী করবে।</li>
  <li><em>মাল্টিমিডিয়া</em>: উন্মুক্ত ওয়েবে ভিডিও এবং অডিও কে প্রথম শ্রেনীতে রাখা হয়েছে।</li>
  <li><em>দ্বিমাত্রিক/ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট</em>: উপস্থাপনার জন্য আরো অনেক বিকল্প দিবে।</li>
  <li><em>কার্যকারিতা এবং ইন্ট্রিগ্রেশন</em>: আরো গতির উন্নতি হবে এবং কম্পিউটার হার্ডওয়্যারের আরো ভালো ব্যবহার হবে</li>
  <li><em>যন্ত্রের ব্যবহার</em>: আরো ইনপুট এবং আউটপুট যন্ত্রের ব্যবহারের সুযোগ দিবে।</li>
  <li>সাজসজ্জা: চমৎকার চমৎকার থিম তৈরি করার সুযোগ দিবে।</li>
</ul>
<div class="cleared row topicpage-table">
  <div class="section">
    <h2 id=".E0.A6.B8.E0.A6.BF.E0.A6.AE.E0.A6.BE.E0.A6.A8.E0.A6.9F.E0.A6.BF.E0.A6.95.E0.A6.B8" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" /><em>সিমানটিকস</em></h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 এর সেকশন এবং আউটলাইন</a></dt>
      <dd>
        HTML5 এর নতুন আউটলাই এবং সেকশন উপাদানের এক ঝলক: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} এবং {{HTMLElement("hgroup")}}.</dd>
      <dt>
        <a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 অডিও এবং ভিডিও'র ব্যবহার</a></dt>
      <dd>
        {{HTMLElement("audio")}} এবং {{HTMLElement("video")}} উপাদান এম্বেড থাকা এবং নতুন মাল্টিমিডিয়ার ব্যবহার নিশ্চিত করা।</dd>
      <dt>
        <a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">HTML5 এর ফর্ম</a></dt>
      <dd>
        এক নজরে HTML5 এ ওয়েব ফর্মের উন্নয়নগুলো দেখে নেই: কন্সট্রেইন্ট ভ্যালিডেশন এপিআই, কিছু নতুন এট্রিবিউট, {{HTMLElement("input")}} এট্রিবিউটের জন্য নতুন নতুন ভ্যালু {{htmlattrxref("type", "input")}} এবং {{HTMLElement("output")}} নামক নতুন এলিমেনট।</dd>
      <dt>
        নতুন সিমানটিকস এলিমেন্ট</dt>
      <dd>
        সেকশন, মিডিয়া এবং ফর্ম এলিমেন্টের পাশাপারশি আরো নতুন নতুন এলিমেন্ট এসেছে, যেমন</dd>
      <dd>
        {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, অথবা{{HTMLElement("meter")}}, যা <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">HTML5 এলিমেন্টের পরিমান বৃদ্ধি করে দিচ্ছে।</a></dd>
      <dt>
        {{HTMLElement("iframe")}} এর আরো উন্নয়ন</dt>
      <dd>
        ‌{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} এট্রিবিউটের ব্যবহার করে, ডেভলপারগন নিরাপত্তার মান কে আরো যথাযথ করতে পারছেন এবং&nbsp; {{HTMLElement("iframe")}} এর চাহিদা মতন রেন্ডারিং করতে পারছেন।</dd>
      <dt>
        <a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
      <dd>
        গাণিতিক ফর্মুলার সরাসরি ব্যবহার নিশ্চিৎ করেছে।</dd>
      <dt>
        <a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 এর পরিচিতি</a></dt>
      <dd>
        আপনি HTML5 এর মাধ্যমে কোন ওয়েব ডিজাইন করলে অথবা কোন ওয়েব এপ্লিকেশন তৈরি করতে চাইলে কিভাবে শুরু করবেন তা এই নিবন্ধে বলা আছে।</dd>
      <dt>
        <a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant পার্সার</a></dt>
      <dd>
        পার্সার, যা HTML নথির বাইটকে DOM এ রূপান্তর করে, এখন বর্ধিত করা হয়েছে এবং&nbsp; এখন আরো যথাযথভাবে সকল ক্ষেত্রে কিভাবে কাজ করবে তা বলা হয়েছে, এমন কি যখন একটি ভুল HTML পাবে।</dd>
    </dl>
    <h2 id=".E0.A6.95.E0.A6.BE.E0.A6.A8.E0.A7.87.E0.A6.95.E0.A7.8D.E0.A6.9F.E0.A6.BF.E0.A6.AD.E0.A6.BF.E0.A6.9F.E0.A6.BF" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" /><em>কানেক্টিভিটি</em></h2>
    <dl>
      <dt>
        <a href="/en-US/docs/WebSockets" title="WebSockets">ওয়েব সকেট</a></dt>
      <dd>
        পৃষ্ঠা এবং সার্ভারের মধ্যে একটি সংযোগ তৈরি করে এবং এই মাধ্যমে HTML নয় এমন তথ্য আদান প্রদান করে।</dd>
      <dt>
        <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">সার্ভার-প্রেরণ ইভেন্ট‌</a></dt>
      <dd>
        গ্রাহককে ইভেন্ট পুশ করতে সার্ভারকে অনুমতি দেয়,&nbsp; গাতনুগতিক মাধ্যমে না করে,&nbsp; সার্ভার শুধুমাত্র গ্রাহকের চাহিদা অনুযায়ি তথ্য প্রেরণ করতে পারে।</dd>
      <dt>
        <a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
      <dd>
        এই প্রযুক্তিতে, যেখানে RTC এর অর্থ Real-Time Communication, অন্য মানুষকে সংযুক্ত করার ক্ষমতা দেয় এবং ব্রাউজারের মাধ্যমে সরাসরি ভিডিও আলোচনা নিয়ন্ত্রন করা যায়, যার জন্য কোন অতিরিক্ত প্লাগিন্স অথবা কোন সফটওয়্যার প্রয়োজন হয় না।</dd>
    </dl>
    <h2 id=".E0.A6.85.E0.A6.AB.E0.A6.B2.E0.A6.BE.E0.A6.87.E0.A6.A8_.E0.A6.8F.E0.A6.AC.E0.A6.82_.E0.A6.B8.E0.A7.8D.E0.A6.9F.E0.A7.8B.E0.A6.B0.E0.A7.87.E0.A6.9C" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" /><em>অফলাইন এবং স্টোরেজ</em></h2>
    <dl>
      <dt>
        <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">অফলাইন রিসোর্স: এপ্লিকেশন ক্যাশ</a></dt>
      <dd>
        ফায়ারফক্স সম্পূর্ণ ভাবে HTML5 অফলাইন রিসোর্স সমর্থন করে। বাকি সবারও একই ধরনের অফলাইন রিসোর্স সমর্থন আছে।</dd>
      <dt>
        <a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">অনলাইন এবং অফলাইন ইভেন্ট</a></dt>
      <dd>
        ফায়ারফক্স ৩ WHATWG অনলাইন এবং অফলাইন ইভেন্ট সমর্থন করে, যা একটি এপ্লিকেশন এবং এক্সটেনশন কে সচল ইন্টারনেট সংযোগ আছে কিনা তা পরীক্ষা করার সুযোগ দেয়, সাথে সাথে সংযোগ কি উঠা নামা করছে কিনা তাও পরীক্ষা করে।</dd>
      <dt>
        <a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWGক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ (এককথায় DOM স্টোরেজ)</a></dt>
      <dd>
        ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ ওয়েব এপ্লিকেশন কে ক্লায়েন্ট সাইডে তথ্য সংরক্ষণে সুবিধা দেয়।</dd>
      <dt>
        <a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
      <dd>
        ইহা একটি ওয়েব মান যা একটি উল্লেখযোগ্য পরিমান সাজানো তথ্য ব্রাজারে সংরক্ষণকে বুঝায় এবং ইন্ডেক্স ব্যবহার করে উচ্চ ক্ষমতায় তথ্য অনুসন্ধানের সুবিধা দেয়।</dd>
      <dt>
        <a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">ওয়েব এপ্লিকেশন থেকে ফাইলের ব্যবহার</a></dt>
      <dd>
        নতুন HTML5 ফাইল এপিআই গিকোতে যুক্ত হয়েছে, যা ব্যবহারকারী দ্বারা নির্বাচিত স্থানীয় ফাইল ব্যবহার করাকে সম্ভব করেছে। This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: Courier New;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute.&nbsp; <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a> ও আছে এখানে।</dd>
    </dl>
    <h2 id=".E0.A6.AE.E0.A6.BE.E0.A6.B2.E0.A7.8D.E0.A6.9F.E0.A6.BF.E0.A6.AE.E0.A6.BF.E0.A6.A1.E0.A6.BF.E0.A7.9F.E0.A6.BE" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />মাল্টিমিডিয়া</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt>
      <dd>
        The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd>
      <dt>
        <a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
      <dd>
        This technology, where RTC stands for Real-Time Communication, allow to connect to other people and control videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
      <dd>
        Allows to use, manipulate and store an image from the computer's camera.</dd>
      <dt>
        Track and WebVTT</dt>
      <dd>
        The&nbsp;{{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd>
    </dl>
    <h2 id=".E0.A6.A4.E0.A7.8D.E0.A6.B0.E0.A6.BF.E0.A6.AE.E0.A6.BE.E0.A6.A4.E0.A7.8D.E0.A6.B0.E0.A6.BF.E0.A6.95.2C_.E0.A6.97.E0.A7.8D.E0.A6.B0.E0.A6.BE.E0.A6.AB.E0.A6.BF.E0.A6.95.E0.A7.8D.E0.A6.B8_.E0.A6.8F.E0.A6.AC.E0.A6.82_.E0.A6.87.E0.A6.AB.E0.A7.87.E0.A6.95.E0.A7.8D.E0.A6.9F.E0.A6.B8" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" />ত্রিমাত্রিক, গ্রাফিক্স এবং ইফেক্টস</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt>
      <dd>
        Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox</dd>
      <dt>
        <a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code>&lt;canvas&gt;</code> elements</a></dt>
      <dd>
        The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd>
      <dt>
        <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
      <dd>
        WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd>
      <dt>
        <a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
      <dd>
        An XML-based format of vectorial images that can directly be embdedded in the HTML.</dd>
      <dt>
        &nbsp;</dt>
    </dl>
  </div>
  <div class="section">
    <h2 id=".E0.A6.95.E0.A6.BE.E0.A6.B0.E0.A7.8D.E0.A6.AF.E0.A6.95.E0.A6.BE.E0.A6.B0.E0.A6.BF.E0.A6.A4.E0.A6.BE_.E0.A6.8F.E0.A6.AC.E0.A6.82_.E0.A6.87.E0.A6.A8.E0.A7.8D.E0.A6.9F.E0.A7.8D.E0.A6.B0.E0.A6.BF.E0.A6.97.E0.A7.8D.E0.A6.B0.E0.A7.87.E0.A6.B6.E0.A6.A8" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" /><em>কার্যকারিতা এবং ইন্ট্রিগ্রেশন</em></h2>
    <dl>
      <dt>
        <a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
      <dd>
        Allows to delegate JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd>
      <dt>
        <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
      <dd>
        Allows to fetch asynchronously some parts of the page, allowing it to be display dynamic content, varying according the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
      <dt>
        JIT-compiling JavaScript engines</dt>
      <dd>
        The new generation of JavaScript engines are much more powerful , leading to greater performance.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
      <dd>
        Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd>
      <dt>
        <a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt>
      <dd>
        HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd>
      <dt>
        <a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
      <dd>
        The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd>
      <dt>
        <a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt>
      <dd>
        The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
      <dt>
        <a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
      <dd>
        You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
      <dt>
        <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
      <dd>
        Allows to control animations rendering to obtain optimal performance.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
      <dd>
        Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd>
      <dt>
        <a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
      <dd>
        Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.</dd>
      <dt>
        <a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
      <dd>
        In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd>
    </dl>
    <h2 id=".E0.A6.AF.E0.A6.A8.E0.A7.8D.E0.A6.A4.E0.A7.8D.E0.A6.B0.E0.A7.87.E0.A6.B0_.E0.A6.AC.E0.A7.8D.E0.A6.AF.E0.A6.AC.E0.A6.B9.E0.A6.BE.E0.A6.B0" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" /><em>যন্ত্রের ব্যবহার</em></h2>
    <dl>
      <dt>
        <a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
      <dd>
        Allows to use, manipulate and store an image from the computer's camera.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt>
      <dd>
        Handlers to react to events created by a user pressing touch screens.</dd>
      <dt>
        <a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt>
      <dd>
        Let browsers locate the position of the user using geolocation.</dd>
      <dt>
        <a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt>
      <dd>
        Let get the information when the device on which runs the browser change orientation. This can be used as an input device (e.g. to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd>
      <dt>
        <a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
      <dd>
        Allows to lock the pointer to the content, so games and similar application don't lose the focus when the pointer reaches the window limit.</dd>
    </dl>
    <h2 id=".E0.A6.B8.E0.A6.BE.E0.A6.9C.E0.A6.B8.E0.A6.9C.E0.A7.8D.E0.A6.9C.E0.A6.BE" style="margin:0 0 .25em;font:200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif;letter-spacing:1px;text-transform:uppercase; border: none"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="vertical-align:middle;width: 64px; height: 64px; padding-right:0.5em" /><em>সাজসজ্জা</em></h2>
    <p><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification anymore and the different modules are not all at level 3: some are at level 1 and some at level 4, with all the intermediate levels covered.</p>
    <dl>
      <dt>
        New background styling features</dt>
      <dd>
        It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd>
      <dt>
        More fancy borders</dt>
      <dd>
        Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd>
      <dt>
        Animating your style</dt>
      <dd>
        Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a trigerring event, you can now control mobile elements on your page.</dd>
      <dt>
        Typography improvement</dt>
      <dd>
        Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd>
      <dt>
        New presentational layouts</dt>
      <dd>
        In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
    </dl>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision