এইচটিএমএল

এইচটিএমএল৫ নতুন এলিমেন্ট - html5 New Element


নীচে HTML5 এর নতুণ এলিমেন্টগুলোর একটি তালিকা এবং তাদের জন্য কী ব্যবহার করা হয় তার বিবরণ দেয়া হল।

সিমেন্টিক এলিমেন্ট

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

ট্যাগ বর্ণনা
<article> ডকুমেন্টের মধ্যে একটি বিষয়বস্তু নির্ধারণ করে।
<aside> পেজের কন্টেন্ট পাশাপাশি নির্ধারণ করে।
<bdi> লেখার দিক নির্ধারণ করে।
<details> অতিরিক্ত বিবরন থাকে যা ব্যবহারকারী দেখতে পারে অথবা লুকিয়ে রাখতে পারে।
<dialog> একটি ডায়ালগ বক্স অথবা উইন্ডো ডিফাইন করে।
<figcaption> একটি <figure> এলিমেন্টের শিরোনাম নির্ধারণ করে।
<figure> স্বয়ংসম্পূর্ণ কন্টেন্ট ডিফাইন করে, যেমন illustrations, diagrams, photos, code listings ইত্যাদি।
<footer> একটি ডকুমেন্ট অথবা সেকশনের একটি footer নির্ধারণ করে।
<header> একটি ডকুমেন্ট অথবা সেকশনের একটি header নির্ধারণ করে।
<main> একটি ডকুমেন্টের মুল বিষয়বস্তু নির্ধারণ করে।
<mark> লেখা হাইলাইট করতে ব্যবহার করা হয়।
<menuitem>  একটি command/menu item তৈরি করবে যা ব্যবহারকারী একটি পপ-আপ মেন্যু আকারে পাবে।
<meter> একটি গণনাযোগ্য পরিমাপ নির্ধারণ করে।
<nav> ডকুমেন্টের মধ্যে একটি নেভিগেশন লিংক নির্ধারণ করে।
<progress> একটি কাজের অগ্রগতি নির্ধারণ করে।
<rp> ruby অ্যানোটেশন সাপোর্ট করে না এমন ব্রাউজারের জন্য ব্যবহার করা হয়।
<rt> East Asian typography এর জন্য ক্যারেক্টারের ব্যাখ্যা/উচ্চারন নির্ধারণ করে।
<ruby> East Asian typography এর জন্য ruby অ্যানোটেশন নির্ধারণ করে।
<section> ডকুমেন্টের মধ্যে একটি সেকশন নির্ধারণ করে।
<summary> একটি <details> এলিমেন্টের দৃশ্যমান হেডিং নির্ধারণ করে।
<time> তারিখ/সময় নির্ধারণ করে।
<wbr> সম্ভাব্য line-break নির্ধারণ করে।

সিমেন্টিক এলিমেন্ট এলিমেন্ট সম্পর্কে আরও জানতে আমাদের এইচটিএমএল ৫ - সিমেন্টিক এলিমেন্ট টিউটোরিয়াল পেজটি ব্রাউজ করুন।

নতুন ফর্ম এলিমেন্ট

এইচটিএমএল ৫ এ নতুন যে সকল ফর্ম এলিমেন্ট যুক্ত করা হয়েছে , সেগুলো সম্পর্কে নিচে দেখুন।

ট্যাগ বর্ণনা
<datalist> ইনপুটের জন্য পূর্বনির্ধারিত অপশন নির্ধারণ করে।
<keygen> form এর জন্য একটি কী তৈরির ফিল্ড নির্ধারণ করে।
<output> একটি হিসাবের ফলাফল নির্ধারণ করে।।

এইচটিএমএল ৫ এর নতুন ফর্ম এলিমেন্ট গুলো সম্পর্কে আরও জানতে আমাদের এইচটিএমএল ৫ - ফর্ম এলিমেন্ট টিউটোরিয়ালটি দেখুন।

নতুন ইনপুট টাইপ

নিচে এইচটিএমএল ৫ এর নতুন ইনপুট টাইপ গুলো দেখুন।

মানবর্ণনা
email বৈধ ই-মেইল ইনপুট করার জন্য <input type="email"> ব্যবহার করা হয়।
number শুধু মাত্র সংখ্যা ইনপুট করার জন্য <input type="number"> ব্যবহার করা হয়।
range ইনপুট ফিল্ডের ভ্যালুর সীমা নির্ধারণ করার জন্য <input type="range"> ব্যবহার করা হয়।
tel টেলিফোন নাম্বার ইনপুট করার জন্য <input type="tel"> ব্যবহার করা হয়।
month তারিখের মধ্যে বছর এবং মাস ইনপুট করার জন্য <input type="month"> ব্যবহার করা হয়।
week তারিখের মধ্যে বছর এবং সপ্তাহ ইনপুট করার জন্য <input type="week"> ব্যবহার করা হয়।
date তারিখ ইনপুট করার জন্য <input type="date"> ব্যবহার করা হয়।
time সময় ইনপুট করার জন্য <input type="time"> ব্যবহার করা হয়।
datetime সময় এবং তারিখ ইনপুট করার জন্য <input type="datetime"> ব্যবহার করা হয়।
datetime-local সময় এবং তারিখ ইনপুট করার জন্য <input type="datetime-local"> ব্যবহার করা হয়।
color কালার ভ্যালু ইনপুট করার জন্য <input type="color"> ব্যবহার করা হয়।
search ইনপুট ফিল্ডে সার্চবক্স হিসাবে ডেটা ইনপুট করার জন্য <input type="search"> ব্যবহার করা হয়।
url ব্যবহারকারীর কাছ থেকে লিংক ইনপুট করার জন্য <input type="url"> ব্যবহার করা হয়।


এইচটিএমএল ৫ এর নতুন ইনপুট টাইপ গুলো সম্পর্কে আরও জানতে আমাদের এইচটিএমএল ৫ - ইনপুট টাইপ টিউটোরিয়ালটি দেখুন।

নতুন ইনপুট এট্রিবিউট

নিচে এইচটিএমএল ৫ এর নতুন ইনপুট এট্রিবিউট গুলো দেখুন।

এট্রিবিউট বর্ণনা
autocomplete পূর্বে ইনপুটকৃত ভ্যালু থেকে নতুন ভ্যালু ইনপুট করতে সাহায্য করে।
autofocuas পেজ লোড হওয়া সম্পন্ন হলে ইনপুট ফিল্ডটি সিলেক্টেড থাকবে কিনা তা নির্ধারণ করে।
form ফর্মের বাইরের ইনপুট ট্যাগকে আইডির মাধ্যমে ফর্মের সাথে লিংক করে।
formaction ফর্মের মূল action এট্রিবিউটকে ওভার-রাইট করে অর্থাৎ সাবমিটের জন্য নতুন একটি লিংক নির্ধারণ করে।
formenctype post মেথোডের ক্ষেত্রে সার্ভারে সাবমিটকৃত ডেটার এনকোডিং পদ্ধতি নির্ধারণ করে।
formmethod সার্ভারে ফর্ম ডেটা পাঠানোর HTTP মেথোড নির্ধারণ করে। এটি ফর্মের মূল মেথোডকে ওভার-রাইড করে।
formvalidation ইনপুট ফিল্ডের তথ্যের বৈধতা যাচাই বাতিল করে।
formtarget ইনপুট এলিমেন্টের জন্য এটি target এট্রিবিউটের কাজ করে এবং ফর্ম এলিমেন্টে বিদ্যমান target এট্রিবিউটকে ওভার-রাইড করে।
height এবং width ইমেজ ইনপুট ফিল্ডের দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করে।
list পূর্বনির্ধারিত ভ্যালুর একটি লিস্টকে ইনপুট ফিল্ডের সাথে আইডির মাধ্যমে লিংক করতে ব্যবহার করা হয়।
min এবং max ইনপুট ফিল্ডের সর্বনিন্ম এবং সর্বোচ্চ ভ্যালু নির্ধারণ করে।
multiple ইনপুট ফিল্ডে একত্রে একাধিক ভ্যালু সিলেক্ট করা সম্ভব হয়। এটি email এবং file টাইপের ক্ষেত্রে কাজ করে।
pattern ইনপুট ফিল্ডের ভ্যালুর জন্য প্যাটার্ন নির্ধারণ করে।
placeholder ইনপুট ফিল্ডের ইনপুটকৃত তথ্য সম্পর্কে ব্যবহারকারীকে অবগত করে। যা ইনপুট ফিল্ডে টাইপ করা শুরু করলে অদৃশ্য হয়ে যায়।
required যদি ইনপুট ফিল্ডটি খালি থাকলে ব্যবহারকারীকে একটি সতর্কবার্তা দেয় এবং ফর্মটি সাবমিট হয় না।
step পূর্ণ সংখ্যার মধ্যবর্তী ব্যবধান নির্ধারণ করে।

এইচটিএমএল ৫ এর নতুন ইনপুট এট্রিবিউট গুলো সম্পর্কে আরও জানতে আমাদের এইচটিএমএল ৫ - ইনপুট এট্রিবিউট টিউটোরিয়ালটি দেখুন।

এইচটিএমএল ৫ - নতুন এট্রিবিউটের গঠনপ্রণালী

এইচটিএমএল ৫ এ এট্রিবিউট চারভাবে লিখা যায়। নিচে <input> এলিমেন্টের চারটি গঠনপ্রণালী দেখানো হলো।

টাইপ উদাহরণ
এম্পটি <input type="text" value="Azizur" disabled>
উদ্ধৃতিবিহীন <input type="text" value=Azizur>
দুইটি উদ্ধৃতিসহ <input type="text" value="Azizur Rahman">
একটি উদ্ধৃতিসহ <input type="text" value='Azizur Rahman'>

এইচটিএমএল ৫ - গ্রাফিক্স এলিমেন্ট

নিচে এইচটিএমএল ৫ এর নতুন গ্রাফিক্স এলিমেন্ট গুলো দেখুন।

ট্যাগ বর্ণনা
<canvas> জাভাস্ক্রিপ্ট ব্যবহার করে এই এলিমেন্ট দ্বারা গ্রাফিক্স তৈরি করা হয়।
<svg> এসভিজি(SVG) ব্যবহার করে গ্রাফিক্স অঙ্কন করা যায়।

এইচটিএমএল ৫ এর ক্যানভাস সম্পর্কে জানতে আমাদের এইচটিএমএল ৫ - ক্যানভাস টিউটোরিয়ালটি দেখুন।

এইচটিএমএল ৫ এর এসভিজি সম্পর্কে জানতে আমাদের এইচটিএমএল ৫ - এসভিজি টিউটোরিয়ালটি দেখুন।

এইচটিএমএল ৫ - নতুন মিডিয়া এলিমেন্ট

নিচে এইচটিএমএল ৫ এর নতুন মিডিয়া এলিমেন্ট গুলো দেখুন।

ট্যাগ বর্ণনা
<audio> শব্দ অথবা মিউজিক কন্টেন্ট ডিফাইন করে।
<embed> এক্সটার্নাল এপ্লিকেশনের জন্য কন্টেইনার নির্ধারণ করে (যেমনঃ plug-ins)।
<source> <video> এবং <audio> ট্যাগের উৎস নির্ধারণ করে।
<track> <video> এবং <audio> ট্যাগের ট্র্যাক নির্ধারণ করে।
<video> ভিডিও কন্টেন্ট নির্ধারণ করে।

এইচটিএমএল ৫ এর ভিডিও সম্পর্কে জানতে আমাদের এইচটিএমএল ৫ - ভিডিও টিউটোরিয়ালটি দেখুন।

এইচটিএমএল ৫ এর অডিও সম্পর্কে জানতে আমাদের এইচটিএমএল ৫ - অডিও টিউটোরিয়ালটি দেখুন।






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

Report or suggest about this page

Copyright 2016-2019 by websschool.com, All Rights Reserved.