এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল(৫) এলিমেন্ট-HTML5 Element


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

এইচটিএমএল(৫) অপেক্ষাকৃত সুন্দর এবং সাজানো ডকুমেন্ট গঠনের জন্য নতুন এলিমেন্ট প্রস্তাব করেঃ

ট্যাগ বর্ণনা
<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 পূর্বনির্ধারিত ভ্যালুর একটি লিস্টকে ইনপুট ফিল্ডের সাথে আইডির মাধ্যমে লিংক করতে ব্যবহার করা হয়।
minimum এবং maximum ইনপুট ফিল্ডের সর্বনিন্ম এবং সর্বোচ্চ ভ্যালু নির্ধারণ করে।
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> ভিডিও কন্টেন্ট নির্ধারণ করে।