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

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

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

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

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

এইচটিএমএল৫

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

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

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

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

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

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

রেফারেন্স- reference

 

এইচটিএমএল(৫) SVG


SVG কি?


এইচটিএমএল <svg> এলিমেন্ট

এইচটিএমএল <svg> এলিমেন্টি SVG গ্রাফিক্স বা চিত্রের জন্য একটি ধারক বা পাত্র।

পথ, বক্স, বৃত্ত, টেক্সট এবং গ্রাফিক ইমেজ আকার জন্য SVG বিভিন্ন পদ্ধতি রয়েছে।


ব্রাউজার সাপোর্ট

যে সকল ব্রাউজার <svg> এলিমেন্ট সাপোর্ট করে তা নিম্নে উল্লেখ করা হলঃ

এলিমেন্ট
<svg> ৪.০ ৯.০ ৩.০ ৩.২ ১০.১

SVG বৃত্ত

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
নিজে চেষ্টা করি »

SVG আয়তক্ষেত্র



উদাহরণ


<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

নিজে চেষ্টা করি »

SVG গোলাকৃতি আয়তক্ষেত্র

দুঃখিত, আপনার ব্রাউজার ইনলাইন SVG সাপোর্ট করে না।

উদাহরণ


<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

নিজে চেষ্টা করি »

SVG তারকা (Star)

দুঃখিত, আপনার ব্রাউজার ইনলাইন SVG সাপোর্ট করে না।

উদাহরণ


<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

নিজে চেষ্টা করি »

SVG লোগো(Logo)

SVG দুঃখিত, আপনার ব্রাউজার ইনলাইন SVG সাপোর্ট করে না।

উদাহরণ


<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  দুঃখিত, আপনার ব্রাউজার ইনলাইন SVG সমর্থন করে না।
</svg>

নিজে চেষ্টা করি »

SVG এবং Canvas এর মধ্যে পার্থক্য

SVG XML- 2D গ্রাফিক্স বর্ণনাকারী একটি ভাষা।

Canvas এর চিত্র গুলো 2D গ্রাফিক্স এর উপর হয়(জাভাস্ক্রিপ্ট দিয়ে)।

SVG হলো XML ভিত্তিক, যার মানে প্রতিটি এলিমেন্ট SVG DOM এর মধ্যে পাওয়া যায়। আপনি একটি এলিমেন্টের জন্য জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারেন।

একটি SVG অবজেক্ট এর অ্যাট্রিবিউট পরিবর্তন করা হয়, ব্রাউজার স্বয়ংক্রিয়ভাবে SVG আকৃতি পুনরায় প্রদান করতে পারে।

Canvas এ পিক্সেল দ্বারা পিক্সেল উপস্থাপন করা হয়। Canvas এর মধ্যে একবার যদি কোন চিত্র আঁকা হয়, তখন ব্রাউজার তা ভুলে যায়। যদি এর অবস্থান পরিবর্তন করা হয়, তবে সম্পূর্ন দৃশ্য পুনরায় আকতে হবে। শুধুমাত্র অবজেক্ট গুলো গ্রাফিক দ্বারা আচ্ছাদিত থাকে।


Canvas এবং SVG এর তুলনা

নীচের টেবিলে Canvas এবং SVG মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য দেখানো হলঃ

Canvas SVG
  • রেজুলেশন নির্ভর
  • ইভেন্ট হ্যান্ডেলারের জন্য সাপোর্ট করে না।
  • অনুবাদের ক্যাপাসিটি ভালো না।
  • আপনি ইমেজকে .png অথবা .jpg দিয়ে সেভ করতে পারবেন।
  • গ্রাফিক্স গেমসের জন্য আদর্শ।
  • রেজুলেশন নির্ভর
  • ইভেন্ট হ্যান্ডেলারের জন্য সাপোর্ট করে
  • কোনো ম্যাপ তৈরি করার জন্য আদর্শ (যেমনঃ গুগল ম্যাপ)
  • তুলনামূলক ধীরগতির।
  • গেমসের জন্য আদর্শ না।

SVG সম্পর্কে আরও জানার জন্য, আমাদের SVG টিউটোরিয়াল পড়ুন.