HTML উদাহরণ
- পূর্ববর্তী পৃষ্ঠা HTML5 SSE
- পরবর্তী পৃষ্ঠা HTML পরীক্ষা
HTML বেসিক ট্যাগ ইনস্ট্যান্স
- একটি সাধারণ HTML ফাইল
- এই উদাহরণটি একটি খুব সাধারণ HTML ফাইল, যা যতটা সম্ভব কম এইচটিএমএল ট্যাগ ব্যবহার করে। এটি আপনাকে বলে যে বডি ইলেমেন্টের কনটেন্টটি কিভাবে ব্রাউজার দ্বারা প্রদর্শিত হয়。
- সাধারণ প্যারাগ্রাফ
- এই উদাহরণটি প্রদর্শিত করে: প্যারাগ্রাফ ইলেমেন্টের লেখা কিভাবে ব্রাউজার দ্বারা প্রদর্শিত হয়。
- আরও প্যারাগ্রাফ
- এই উদাহরণটি প্যারাগ্রাফ ইলেমেন্টের কিছু ডিফল্ট হাবিট প্রদর্শিত করে。
- “কবিতা” সমস্যা
- এই উদাহরণটি HTML ফরম্যাটিংয়ের কিছু সমস্যা প্রদর্শিত করে。
- বাক্যবিন্যাস
- এই উদাহরণটি এই প্রমাণ করে যে HTML ডকুমেন্টে বাক্যবিন্যাস করা হয়।
- 标题
- 本例演示在 HTML 文档中显示标题的标签。
- 居中排列的标题
- 本例演示一个居中排列的标题。
- 水平线
- 本例演示如何插入水平线。
- 隐藏的注释
- 本例演示如何在 HTML 源代码中插入隐藏的注释。
- 背景颜色
- 本例演示如何为 HTML 页面添加背景颜色。
HTML টেক্সট ফরম্যাট ইনস্ট্যান্স
- টেক্সট ফরম্যাট
- এই উদাহরণটি কিভাবে HTML ফাইলে টেক্সটকে ফরম্যাট করা যায়
- প্রিফর্ম্যাটিড টেক্সট
- এই উদাহরণটি pre ট্যাগটি কিভাবে কাজ করে দেখায়
- “কম্পিউটার আউটপুট” ট্যাগ
- ভিন্ন "কম্পিউটার আউটপুট" ট্যাগের প্রদর্শন
- ঠিকানা
- এই উদাহরণটি কিভাবে HTML ফাইলে ঠিকানা লিখা যায়
- সংক্ষিপ্ত এবং প্রথম অক্ষরের সংক্ষিপ্ত
- সংক্ষিপ্ত এবং প্রথম অক্ষরের সংক্ষিপ্ত
- টেক্সট দিক
- টেক্সট দিক কিভাবে পরিবর্তন করা যায়
- ব্লক উদ্ধৃতি
- বিভিন্ন দৈর্ঘ্যের উদ্ধৃতি কিভাবে রূপায়িত করা যায়
- মুদ্রিত করা টেক্সট এবং ইনসার্ট টেক্সট
- এই উদাহরণটি কিভাবে মুদ্রিত টেক্সট এবং ইনসার্ট টেক্সটকে ট্যাগ করা যায় দেখায়。
HTML লিঙ্ক ইনস্ট্যান্স
- সুপার লিঙ্ক তৈরি
- এই উদাহরণটি কিভাবে HTML ডকুমেন্টে লিঙ্ক তৈরি করা যায় দেখায়。
- ছবিটিকে লিঙ্ক হিসাবে ব্যবহার
- এই উদাহরণটি কিভাবে ছবিটিকে লিঙ্ক হিসাবে ব্যবহার করা যায় দেখায়。
- নতুন ব্রাউজার উইন্ডোতে লিঙ্ক খোলা
- এই উদাহরণটি কিভাবে একটি নতুন ব্রাউজার উইন্ডোতে পেজ খোলা যায়, যাতে ভ্রমণকারী আপনার সাইট থেকে ছেড়ে যাবেন না。
- একই পেজের ভিন্ন অংশে লিঙ্কিং
- এই উদাহরণটি লিঙ্কটি কিভাবে ডকুমেন্টের আরেকটি অংশে জুড়ে দেখায়
- ফ্রেম থেকে বেরিয়ে আসা
- এই উদাহরণটি ফ্রেম থেকে বেরিয়ে আসার কিভাব দেখায়, যদি আপনার পেজ ফ্রেমের মধ্যে বন্ধ থাকে।
- ইমেইল লিঙ্ক তৈরি
- এই উদাহরণটি ইমেইলে লিঙ্কিং করতে কিভাব দেখায়।(এই উদাহরণ যদি ইমেইল ক্লায়েন্ট প্রোগ্রাম ইনস্টল করা হয়, তবে কাজ করবে)。
- ইমেইল লিঙ্ক তৈরি 2
- এই উদাহরণটি আরও জটিল ইমেইল লিঙ্কটি দেখায়。
HTML ফ্রেম ইনস্ট্যান্স
- ভার্টিক্যাল ফ্রেম
- এই উদাহরণটি তিনটি ভিন্ন ডকুমেন্ট ব্যবহার করে একটি ভার্টিক্যাল ফ্রেম তৈরি করতে কিভাব দেখায়。
- হোরিজন্টাল ফ্রেম
- এই উদাহরণটি তিনটি ভিন্ন ডকুমেন্ট ব্যবহার করে একটি হোরিজন্টাল ফ্রেম তৈরি করতে কিভাব দেখায়。
- কিভাবে <noframes> ট্যাগটি ব্যবহার করা যায়
- এই উদাহরণটি <noframes> ট্যাগটি কিভাবে ব্যবহার করা যায় দেখায়。
- মিশ্রিত ফ্রেম স্ট্রাকচার
- এই উদাহরণটি তিনটি ডকুমেন্টসহ ফ্রেম স্ট্রাকচার তৈরি করতে কিভাব দেখায় এবং তাদেরকে সারিতে এবং স্তম্ভে মিশ্রিত করে রাখে।
- noresize="noresize" অ্যাট্রিবিউটসহ ফ্রেম স্ট্রাকচার
- এই উদাহরণটি noresize অ্যাট্রিবিউটটি দেখায়। এই উদাহরণে, ফ্রেমটি মাপানো যায়না। ফ্রেমের মধ্যের সীমানায় মাউস টাইপ করে আপনি দেখবেন যে সীমানা সরণীয় নয়。
- নেভিগেশন ফ্রেম
- এই উদাহরণটি নেভিগেশন ফ্রেমকে তৈরি করতে কিভাব দেখায়। নেভিগেশন ফ্রেমটি একটি লিঙ্ক তালিকা ধারণ করে, যা দ্বিতীয় ফ্রেমকে লক্ষ্য করে। "contents.htm" নামক ফাইলটিতে তিনটি লিঙ্ক রয়েছে。
- ইনলাইন ফ্রেম
- ইনলাইন ফ্রেম (HTML পৃষ্ঠার ফ্রেম) কিভাবে তৈরি করা যায় তা প্রদর্শন করে
- ফ্রেমের মধ্যে নির্দিষ্ট সেকশনে জুড়ানো
- ফ্রেমের মধ্যে নির্দিষ্ট সেকশনে জুড়ানো
- নির্দিষ্ট সেকশনে ফ্রেম নেভিগেশন করা
- এই উদাহরণ দুটি ফ্রেম প্রদর্শন করে।ডানদিকের নেভিগেশন ফ্রেমটি একটি লিঙ্ক লিস্ট ধারণ করে, যেগুলো দ্বিতীয়টি ফ্রেমকে লক্ষ্য করে।দ্বিতীয়টি ফ্রেম লিঙ্ককৃত ডকুমেন্টকে দেখায়।নেভিগেশন ফ্রেমটির লিঙ্কগুলো লক্ষ্য ফাইলের নির্দিষ্ট সেকশনগুলোতে ইনডিকেট করে
HTML টেবিল ইনস্ট্যান্স
- টেবিল
- এই উদাহরণ HTML ডকুমেন্টে কিভাবে টেবিল তৈরি করা যায় তা প্রদর্শন করে
- টেবিল ফ্রেম
- এই উদাহরণ বিভিন্ন ধরণের টেবিল ফ্রেম প্রদর্শন করে
- শিরোনাম বিহীন টেবিল
- এই উদাহরণ একটি শিরোনাম বিহীন টেবিল প্রদর্শন করে
- টেবিলের শিরোনাম (Heading)
- এই উদাহরণ কিভাবে টেবিল শিরোনামকে দেখানো যায় তা প্রদর্শন করে
- শূন্য কোষাংশ
- এই উদাহরণ কিভাবে " " ব্যবহার করে শূন্য কোষাংশকে প্রদর্শন করা যায় তা প্রদর্শন করে
- শিরোনাম (caption) সহ টেবিল
- শিরোনাম (caption) সহ টেবিল
- ক্রস-রো বা ক্রস-কলামের টেবিল কোষাংশ
- এই উদাহরণ কিভাবে ক্রস-রো বা ক্রস-কলামের টেবিল কোষাংশ নির্ধারণ করা যায় তা প্রদর্শন করে
- টেবিলের ট্যাগ
- বিভিন্ন উপাদানের মধ্যে উপাদানকে দেখানো
- কোষাংশের মধ্যের দূরত্ব (Cell padding)
- কোষাংশের মধ্যের দূরত্ব বাড়াতে "Cell padding" ব্যবহার করা
- কোষাংশের মধ্যের দূরত্ব (Cell spacing)
- কোষাংশের মধ্যের দূরত্ব বাড়াতে "Cell spacing" ব্যবহার করা
- টেবিলে পটভূমির রঙ বা পটভূমির ছবি যোগ করা
- টেবিলে পটভূমির রঙ বা পটভূমির ছবি যোগ করা
- টেবিল কোষাংশে পটভূমির রঙ বা পটভূমির ছবি যোগ করা
- টেবিল কোষাংশে পটভূমির রঙ বা পটভূমির ছবি যোগ করা
- টেবিল কোষাংশের বিষয়গুলোকে গঠন করা
- এই উদাহরণ "align" এটিভারি কিভাবে টেবিল কোষাংশের বিষয়গুলো গঠন করা যায় তা প্রদর্শন করে
- ফ্রেম (frame) এটিভারি
- এই উদাহরণ "frame" এটিভারি কিভাবে টেবিলের চারপাশের ফ্রেম নিয়ন্ত্রণ করা যায় তা প্রদর্শন করে
HTML লিস্ট ইনস্ট্যান্স
- সাধারণ লিস্ট
- এই উদাহরণ একটি সাধারণ লিস্ট প্রদর্শন করে
- সাধারণ লিস্ট
- এই উদাহরণ একটি সাধারণ লিস্ট প্রদর্শন করে
- বিভিন্ন ধরণের সাধারণ লিস্ট
- এই উদাহরণ একটি সাধারণ লিস্ট প্রদর্শন করে
- বিভিন্ন ধরণের সাধারণ লিস্ট
- এই উদাহরণ বিভিন্ন ধরণের সাধারণ লিস্ট প্রদর্শন করে
- নিম্নস্তরের লিস্ট
- এই উদাহরণ নিম্নস্তরের লিস্ট কিভাবে নিম্নস্তরে প্রদর্শন করা যায় তা প্রদর্শন করে
- নিম্নস্তরের লিস্ট 2
- এই উদাহরণ একটি অত্যন্ত জটিল নিম্নস্তরের লিস্ট প্রদর্শন করে
- ডিফাইনিশন লিস্ট
- এই একটি উদাহরণ একটি ডিফাইনিশন লিস্ট প্রদর্শন করে
HTML ফর্ম এবং ইনপুট ইনস্ট্যান্স
- 文本域(Text fields)
- 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
- 密码域
- 本例演示如何创建 HTML 的密码域。
- 复选框
- 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
- 单选按钮
- 本例演示如何在 HTML 中创建单选按钮。
- 简单的下拉列表
- 本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
- 另一个下拉列表
- 本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
- আরেকটি প্রিভাইজ সিলেক্টর
- এই উদাহরণে দেখানো হয়েছে কিভাবে একটি সাধারণ প্রিভাইজ সিলেক্টর তৈরি করা যায়।প্রিভাইজ সিলেক্টরটি একটি প্রিভাইজ লিস্ট
- টেক্সট এরিয়া (টেক্সটেইরিয়া)
- এই উদাহরণে দেখানো হয়েছে কিভাবে একটি টেক্সট এরিয়া (বহুল লাইন টেক্সট ইনপুট কন্ট্রোল) তৈরি করা যায়।টেক্সট এরিয়াতে, লিখা হতে পারেন একটি সীমাহীন বয়াজ্য
- বাটন তৈরি
- এই উদাহরণে দেখানো হয়েছে কিভাবে একটি বাটন তৈরি করা যায়।বাটনের উপরের লেখা কাস্টমাইজ করা যায়。
ডাটা চারদিকে ফিল্ডসেট
- এই উদাহরণে দেখানো হয়েছে কিভাবে ডাটা চারদিকে একটি শিরোনামসহ ফিল্ডসেট টুইনকরা যায়。
- ফর্ম উদাহরণ
- ইনপুট বক্স ও নিশ্চয় বাটন সহ ফর্ম
- এই উদাহরণে দেখানো হয়েছে কিভাবে একটি ফর্ম পাতায় যোগ করা যায়।এই ফর্মটি দুটি ইনপুট বক্স ও একটি নিশ্চয় বাটন ধারণ করে。
- চেকবক্স সহ ফর্ম
- এই ফর্মটি দুটি চেকবক্স ও একটি নিশ্চয় বাটন ধারণ করে。
- রেডিও বক্স সহ ফর্ম
- এই ফর্মটি দুটি রেডিও বক্স ও একটি নিশ্চয় বাটন ধারণ করে。
ফর্ম থেকে ইমেল পাঠানো
- এই উদাহরণে দেখানো হয়েছে কিভাবে ফর্ম থেকে ইমেল পাঠানো যায়。
- HTML ছবি উদাহরণ
- ছবি প্রদর্শন
- এই উদাহরণে দেখানো হয়েছে কিভাবে ওয়েবপেজে ছবি প্রদর্শন করা যায়。
- প্রবন্ধ ছবি
- এই উদাহরণে দেখানো হয়েছে কিভাবে একটি অন্য ফোল্ডার বা সার্ভারের ছবিকে ওয়েবপেজে প্রদর্শন করা যায়。
- ছবি সাজানো
- এই উদাহরণে দেখানো হয়েছে কিভাবে ছবিকে লেখার মধ্যে সাজানো যায়。
- ফ্লট ছবি
- এই উদাহরণে দেখানো হয়েছে কিভাবে ছবিকে প্রবন্ধের বাম বা ডানদিকে ফ্লট করা যায়。
- ছবির মাপ সংযোজন
- ছবির মাপ সংযোজন
- ছবির প্রদর্শনের প্রতিস্থাপন টেক্সট
- এই উদাহরণে দেখানো হয়েছে কিভাবে ছবিটিকে ভিন্ন মাপে প্রদর্শন করা যায়।ব্রাউজার ছবিকে লোড করতে পারলে না তবে, প্রতিস্থাপন টেক্সট অ্যাট্রিবিউট পাঠকদেরকে হারানো তথ্য জানায়।পাতায় ছবিগুলিকে প্রতিস্থাপন টেক্সট অ্যাট্রিবিউট প্রদান করা একটি ভালো অভ্যাস
- ছবি লিঙ্ক তৈরি
- এই উদাহরণে দেখানো হয়েছে কিভাবে একটি ছবিকে লিঙ্ক হিসাবে ব্যবহার করা যায়。
- ছবি ম্যাপ তৈরি
- এই উদাহরণে দেখানো হয়েছে কিভাবে একটি ছবিতে ক্লিক করা যায় এবং প্রত্যেকটি অঞ্চলকে একটি হাইপারলিঙ্ক হিসাবে ব্যবহার করা যায়。
- ছবিকে ইমেজ ম্যাপে পরিবর্তন
- এই উদাহরণে দেখানো হয়েছে কিভাবে একটি সাধারণ ছবিকে ইমেজ ম্যাপ হিসাবে ব্যবহার করা যায়。
HTML প্রবন্ধ উদাহরণ
- মিলেইশে ভালো প্রবন্ধ ও রঙ
- একটি প্রবন্ধ ও লেখার রঙ যোগ্যভাবে মিলেইশে, এটি পাতায় লেখাটি পড়ার সুবিধা করে দেয়。
- বিপরীত প্রবন্ধ ও রঙ
- 一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。
- পড়াশোনা সহজ পটভূমি ছবি
- পড়াশোনা সহজ পটভূমি ছবি
- পড়াশোনা সহজ পটভূমি ছবি 2
- পটভূমি ছবি ও লিখন রঙ কারণে পাতার লেখা পড়া যাওয়া যায় এমন উদাহরণ
- পড়াশোনা বাধাপ্রদ পটভূমি ছবি
- পটভূমি ছবি ও লিখন রঙ কারণে পাতার লেখা পড়া যাওয়া যায় না এমন উদাহরণ
HTML স্টাইল (style) উদাহরণ
- HTML-তে স্টাইল
- এই উদাহরণটি দেখিয়ে দেয় যে, কিভাবে <head> অংশের স্টাইল তথ্য ব্যবহার করে HTML-কে ফরম্যাট করা যায়。
- নীচের লিঙ্ক যেন ন্যানা হোক না করা
- স্টাইল অ্যাট্রিবিউট ব্যবহার করে নীচের লিঙ্ক যেন ন্যানা হোক না করা
- একটি বাহ্যিক স্টাইল শৈলীকে লিঙ্ক করা
- এই উদাহরণটি দেখিয়ে দেয় যে, কিভাবে <link> ট্যাগটি একটি বাহ্যিক স্টাইল শৈলীকে লিঙ্ক করা যায়。
HTML হেড (head) উদাহরণ
- ডকুমেন্টের শিরোনাম
- হেড ইঞ্জিনের ভিতরের শিরোনাম তথ্য ব্রাউজার উইন্ডোতে দেখা যায় না。
- একটি target, সব লিঙ্ক
- এই উদাহরণটি দেখিয়ে দেয় যে, কিভাবে base ট্যাগ ব্যবহার করে পাতার সব ট্যাগকে একটি নতুন উইন্ডোতে খোলা যায়。
HTML মেটা (meta) উদাহরণ
- ডকুমেন্ট বর্ণনা
- মেটা ইঞ্জিনের তথ্য এই HTML ডকুমেন্টকে বর্ণনা করতে পারে。
- ডকুমেন্ট কীওয়ার্ড
- মেটা ইঞ্জিনের তথ্য ডকুমেন্টের কীওয়ার্ডস বর্ণনা করতে পারে。
- পুনর্নির্দেশনা
- এই উদাহরণটি দেখিয়ে দেয় যে, যদি ইউরির চিহ্নিত্ব পরিবর্তিত হয়, তবে ব্যবহারকারীকে আরেকটি ঠিকানায় পাঠিয়ে যাওয়া যায়。
HTML স্ক্রিপ্ট (Script) উদাহরণ
- একটি স্ক্রিপ্ট সংযোজন
- HTML ডকুমেন্টে স্ক্রিপ্ট সংযোজন
- স্ক্রিপ্ট না সমর্থনকারী ব্রাউজারে চালানো
- এই উদাহরণটি দেখিয়ে দেয় যে, স্ক্রিপ্ট সমর্থন না করেনো ব্রাউজারে কিভাবে কাজ করা যায়。
- পূর্ববর্তী পৃষ্ঠা HTML5 SSE
- পরবর্তী পৃষ্ঠা HTML পরীক্ষা
