17 টি সহজ HTML কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেন

17 টি সহজ HTML কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেন

যদিও আধুনিক ওয়েবসাইটগুলি সাধারণত ব্যবহারকারী-বান্ধব ইন্টারফেস দিয়ে তৈরি করা হয়, কিছু মৌলিক এইচটিএমএল জানা দরকারী। আপনি যদি নিম্নলিখিত 17 টি এইচটিএমএল উদাহরণ ট্যাগ (এবং কয়েকটি এক্সট্রা) জানেন, তাহলে আপনি স্ক্র্যাচ থেকে একটি প্রাথমিক ওয়েবপৃষ্ঠা তৈরি করতে পারবেন বা ওয়ার্ডপ্রেসের মতো একটি অ্যাপ দ্বারা তৈরি কোডটি টুইক করতে পারবেন।





আমরা বেশিরভাগ ট্যাগের জন্য আউটপুট সহ HTML কোড উদাহরণ প্রদান করেছি। আপনি যদি এগুলিকে কার্যক্রমে দেখতে চান তবে নিবন্ধের শেষে নমুনা HTML ফাইলটি ডাউনলোড করুন। আপনি এটি একটি টেক্সট এডিটরে খেলতে পারেন এবং আপনার পরিবর্তনগুলি কি করে তা দেখতে একটি ব্রাউজারে এটি লোড করতে পারেন।



ঘ।

আপনার তৈরি প্রতিটি HTML ডকুমেন্টের শুরুতে আপনার এই ট্যাগের প্রয়োজন হবে। এটি নিশ্চিত করে যে একটি ব্রাউজার জানে যে এটি এইচটিএমএল পড়ছে, এবং এটি এইচটিএমএল 5 আশা করে, সর্বশেষ সংস্করণ।





যদিও এটি আসলে একটি এইচটিএমএল ট্যাগ নয়, তবুও এটি জানা ভাল।

2।

এটি আরেকটি ট্যাগ যা একটি ব্রাউজারকে বলে যে এটি HTML পড়ছে। DOCTYPE ট্যাগের পরে ট্যাগটি সরাসরি চলে যায় এবং আপনি আপনার ফাইলের শেষে একটি ট্যাগ দিয়ে এটি বন্ধ করেন। আপনার ডকুমেন্টের অন্য সবকিছু এই ট্যাগগুলির মধ্যে চলে যায়।



3।

ট্যাগটি আপনার ফাইলের হেডার বিভাগ শুরু করে। এখানে প্রবেশ করা জিনিসগুলি আপনার ওয়েবপৃষ্ঠায় প্রদর্শিত হয় না। পরিবর্তে, এতে সার্চ ইঞ্জিনের মেটাডেটা এবং আপনার ব্রাউজারের তথ্য রয়েছে।

মৌলিক পৃষ্ঠাগুলির জন্য, ট্যাগটিতে আপনার শিরোনাম থাকবে, এবং এটি এটি সম্পর্কে। কিন্তু আরও কিছু জিনিস আছে যা আপনি অন্তর্ভুক্ত করতে পারেন, যা আমরা এক মুহুর্তের মধ্যে শেষ করব।



চার।

এই ট্যাগটি আপনার পৃষ্ঠার শিরোনাম নির্ধারণ করে। আপনাকে যা করতে হবে তা হ'ল আপনার শিরোনামটি ট্যাগটিতে রাখুন এবং এটি বন্ধ করুন, এইভাবে (আমি শিরোনাম ট্যাগগুলিও অন্তর্ভুক্ত করেছি, প্রসঙ্গটি দেখানোর জন্য):


My Website

যে নামটি ট্যাব শিরোনাম হিসাবে প্রদর্শিত হবে যখন এটি একটি ব্রাউজারে খোলা হবে।



5।

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

  • বর্ণনা : আপনার পৃষ্ঠার একটি মৌলিক বর্ণনা।
  • কীওয়ার্ড : আপনার পৃষ্ঠায় প্রযোজ্য কীওয়ার্ডের একটি নির্বাচন।
  • লেখক : আপনার পৃষ্ঠার লেখক।
  • ভিউপোর্ট : আপনার পৃষ্ঠাটি সমস্ত ডিভাইসে ভাল দেখাচ্ছে তা নিশ্চিত করার জন্য একটি ট্যাগ।

এখানে একটি উদাহরণ যা এই পৃষ্ঠায় প্রযোজ্য হতে পারে:




আপনার পৃষ্ঠা মোবাইল এবং ডেস্কটপ ডিভাইসে ভালভাবে প্রদর্শন করে তা নিশ্চিত করার জন্য 'ভিউপোর্ট' ট্যাগের সর্বদা 'প্রস্থ = ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল = 1.0' থাকা উচিত।

6।

আপনি হেডার বিভাগটি বন্ধ করার পরে, আপনি শরীরে যান। আপনি এটি ট্যাগ দিয়ে খুলুন এবং ট্যাগ দিয়ে এটি বন্ধ করুন। ট্যাগের ঠিক আগে এটি আপনার ফাইলের শেষে চলে যায়।

আপনার ওয়েবপেজের সমস্ত বিষয়বস্তু এই ট্যাগগুলির মধ্যে চলে যায়। এটি যতটা সহজ মনে হচ্ছে:


Everything you want displayed on your page.

7।

একটু কম বড় হেডার


সাব হেডার

ফলাফল:

আপনি দেখতে পাচ্ছেন, তারা প্রতিটি স্তরে ছোট হয়ে যায়।

8।

অনুচ্ছেদ ট্যাগ একটি নতুন অনুচ্ছেদ শুরু করে। এটি সাধারণত দুটি লাইন বিরতি োকায়।

উদাহরণস্বরূপ, পূর্ববর্তী লাইন এবং এই একের মধ্যে বিরতিতে দেখুন। এটাই কি

ট্যাগ করবে।

Your first paragraph.


Your second paragraph.

ফলাফল:

আপনার প্রথম অনুচ্ছেদ।

আপনার দ্বিতীয় অনুচ্ছেদ।

আপনি এটিও করতে পারেন CSS স্টাইল ব্যবহার করুন আপনার অনুচ্ছেদ ট্যাগগুলিতে, এটির মতো যা পাঠ্যের আকার পরিবর্তন করে:

This is 50% larger text.

ফলাফল:

9।

লাইন বিরতি ট্যাগ একটি একক লাইন বিরতি োকায়:

The first line.

The second line (close to the first one).

ফলাফল:

একই ভাবে কাজ করা হল

ট্যাগ এটি আপনার পৃষ্ঠায় একটি অনুভূমিক রেখা টেনেছে এবং পাঠ্যের বিভাগগুলি পৃথক করার জন্য ভাল।

10

এই ট্যাগ গুরুত্বপূর্ণ পাঠ্য সংজ্ঞায়িত করে। সাধারণভাবে, এর অর্থ এটি সাহসী হবে। যাইহোক, এটি তৈরি করতে CSS ব্যবহার করা সম্ভব পাঠ্য প্রদর্শন ভিন্নভাবে।

আইক্লাউড আমাকে সাইন ইন করতে দেবে না

যাইহোক, আপনি নিরাপদে ব্যবহার করতে পারেন সাহসী পাঠ্য।

Very important things you want to say.

ফলাফল:

খুব গুরুত্বপূর্ণ বিষয় আপনি বলতে চান।

আপনি যদি এর সাথে পরিচিত হন সাহসী পাঠ্যের জন্য ট্যাগ, আপনি এখনও এটি ব্যবহার করতে পারেন। এটির গ্যারান্টি নেই যে এটি এইচটিএমএল এর ভবিষ্যতের সংস্করণগুলিতে কাজ করবে, কিন্তু আপাতত, এটি কাজ করে।

এগারো

মত এবং , এবং সম্পর্কিত. দ্য ট্যাগ জোর দেওয়া পাঠ্যকে চিহ্নিত করে, যার অর্থ সাধারণত এটি ইটালিকাইজড হয়ে যাবে। আবার, সিএসএস জোরালো পাঠ্য প্রদর্শনকে ভিন্নভাবে তৈরি করার সম্ভাবনা রয়েছে।

An emphasized line.

ফলাফল:

একটি জোর দেওয়া লাইন।

দ্য ট্যাগ এখনও কাজ করে, কিন্তু আবার, এটা সম্ভব যে এটি এইচটিএমএল এর ভবিষ্যতের সংস্করণগুলিতে অপ্রচলিত হবে।

12

দ্য , অথবা নোঙ্গর, ট্যাগ আপনাকে লিঙ্ক তৈরি করতে দেয়। একটি সহজ লিঙ্ক এই মত দেখাচ্ছে:

MUO তে যান

'Href' বৈশিষ্ট্যটি লিঙ্কটির গন্তব্য চিহ্নিত করে। অনেক ক্ষেত্রে, এটি অন্য ওয়েবসাইট হবে। এটি একটি ফাইল, যেমন একটি ছবি বা পিডিএফ হতে পারে।

অন্যান্য দরকারী বৈশিষ্ট্যগুলির মধ্যে রয়েছে 'লক্ষ্য' এবং 'শিরোনাম।' টার্গেট অ্যাট্রিবিউট প্রায় একচেটিয়াভাবে একটি নতুন ট্যাব বা উইন্ডোতে একটি লিঙ্ক খুলতে ব্যবহৃত হয়, যেমন:

Go to MUO in a new tab

ফলাফল:

একটি নতুন ট্যাবে MUO তে যান

'শিরোনাম' বৈশিষ্ট্য একটি টুলটিপ তৈরি করে। এটি কীভাবে কাজ করে তা দেখতে নীচের লিঙ্কে ঘুরে দেখুন:

Hover over this to see the tool tip

ফলাফল:

টুল টিপ দেখতে এটির উপরে ঘুরুন

13।

আপনি যদি আপনার পৃষ্ঠায় একটি ছবি এম্বেড করতে চান, তাহলে আপনাকে ইমেজ ট্যাগ ব্যবহার করতে হবে। আপনি সাধারণত 'src' বৈশিষ্ট্যের সাথে এটি ব্যবহার করবেন। এটি ছবির উৎসকে নির্দিষ্ট করে, যেমন:

ফলাফল:

কিভাবে ল্যাপটপ গেমিং পারফরম্যান্স উন্নত করা যায়

অন্যান্য বৈশিষ্ট্য পাওয়া যায়, যেমন 'উচ্চতা,' 'প্রস্থ,' এবং 'alt'। এটি দেখতে কেমন হতে পারে তা এখানে:

the name of your image

আপনি যেমন আশা করতে পারেন, 'উচ্চতা' এবং 'প্রস্থ' বৈশিষ্ট্যগুলি চিত্রের উচ্চতা এবং প্রস্থ নির্ধারণ করে। সাধারণভাবে, তাদের মধ্যে কেবল একটি সেট করা একটি ভাল ধারণা যাতে চিত্রটি সঠিকভাবে স্কেল করে। যদি আপনি উভয় ব্যবহার করেন, আপনি একটি প্রসারিত বা squished ইমেজ সঙ্গে শেষ করতে পারে।

'Alt' ট্যাগটি ব্রাউজারকে বলে যে ছবিটি প্রদর্শন করতে না পারলে কোন টেক্সট প্রদর্শন করতে হবে এবং যেকোনো ছবির সাথে এটি অন্তর্ভুক্ত করা একটি ভাল ধারণা। যদি কারও বিশেষভাবে ধীর সংযোগ বা পুরানো ব্রাউজার থাকে তবে তারা আপনার পৃষ্ঠায় কী হওয়া উচিত তার একটি ধারণা পেতে পারে।

14।

    অর্ডার করা তালিকা ট্যাগ আপনাকে একটি অর্ডারকৃত তালিকা তৈরি করতে দেয়। সাধারণভাবে, এর অর্থ হল আপনি একটি সংখ্যাযুক্ত তালিকা পাবেন। তালিকার প্রতিটি আইটেমের একটি তালিকা আইটেম ট্যাগ প্রয়োজন (

  1. ), তাই আপনার তালিকা এই মত হবে:


    1. First thing

    2. Second thing

    3. Third thing

    ফলাফল:

    1. প্রথম জিনিস
    2. দ্বিতীয় জিনিস
    3. তৃতীয় জিনিস

    HTML5 এ, আপনি ব্যবহার করতে পারেন

      সংখ্যার ক্রম বিপরীত করতে। এবং আপনি স্টার্ট অ্যাট্রিবিউট দিয়ে শুরু মান সেট করতে পারেন।

      'টাইপ' অ্যাট্রিবিউট আপনাকে ব্রাউজারকে বলতে দেয় যে তালিকা আইটেমের জন্য কোন ধরনের প্রতীক ব্যবহার করতে হবে। এটি '1,' 'A,' 'a,' 'I,' বা 'i,' এ সেট করা যেতে পারে এইভাবে নির্দেশিত প্রতীক দিয়ে প্রদর্শনের জন্য তালিকা সেট করুন:

        পনের.

          অর্ডারবিহীন তালিকাটি তার অর্ডারকৃত প্রতিপক্ষের তুলনায় অনেক সহজ। এটি কেবল একটি বুলেটযুক্ত তালিকা।


          • First item

          • Second item

          • Third item

          ফলাফল:

          • প্রথম আইটেম
          • দ্বিতীয় আইটেম
          • তৃতীয় আইটেম

          অনিয়ন্ত্রিত তালিকায় 'টাইপ' বৈশিষ্ট্যও রয়েছে এবং আপনি এটি 'ডিস্ক,' 'বৃত্ত,' বা 'বর্গক্ষেত্র' এ সেট করতে পারেন।

          16।

          ফরম্যাটিংয়ের জন্য টেবিল ব্যবহার করার সময় ভ্রান্তি দেখা যায়, এমন অনেক সময় আছে যখন আপনি আপনার পৃষ্ঠায় তথ্য সেগমেন্ট করতে সারি এবং কলাম ব্যবহার করতে চান। কাজ করার জন্য একটি টেবিল পেতে বেশ কিছু ট্যাগ প্রয়োজন। এখানে নমুনা HTML কোড:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          দ্য

          এবং
          ট্যাগগুলি টেবিলের শুরু এবং শেষ নির্দিষ্ট করে। দ্যট্যাগটিতে টেবিলের সমস্ত সামগ্রী রয়েছে।

          টেবিলের প্রতিটি সারি একটিতে ঘেরাট্যাগ প্রতিটি সারির মধ্যে প্রতিটি কোষ হয় মোড়ানোকলাম হেডারের জন্য ট্যাগ, অথবাকলাম ডেটার জন্য ট্যাগ। প্রতিটি সারির প্রতিটি কলামের জন্য আপনার এইগুলির একটি প্রয়োজন।

          ফলাফল:

          ১ ম কলাম২ য় কলাম
          সারি 1, কলাম 1সারি 1, কলাম 2
          সারি 2, কলাম 1সারি 2, কলাম 2

          17।

          যখন আপনি অন্য ওয়েবসাইট বা ব্যক্তির উদ্ধৃতি দিচ্ছেন এবং আপনি আপনার বাকী নথির থেকে উদ্ধৃতিটি আলাদা করতে চান, তখন ব্লককোট ট্যাগটি ব্যবহার করুন। আপনাকে যা করতে হবে তা হল ব্লককোট ট্যাগগুলি খোলার এবং বন্ধ করার উদ্ধৃতিটি সংযুক্ত করা:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          ফলাফল:

          ওয়েব যেমনটি আমি কল্পনা করেছি, আমরা এটি এখনও দেখিনি। ভবিষ্যত এখনো অতীতের চেয়ে অনেক বড়।

          আপনি যে ব্রাউজারটি ব্যবহার করছেন বা আপনার সাইটের সিএসএস তার উপর নির্ভর করে সঠিক ফর্ম্যাটিং। কিন্তু ট্যাগ একই থাকে।

          HTML কোড নমুনা

          এই 17 টি এইচটিএমএল উদাহরণ দিয়ে, আপনি একটি সাধারণ ওয়েবসাইট তৈরি করতে সক্ষম হবেন। তারা কীভাবে কাজ করে সে সম্পর্কে অনুভূতি পেতে আপনি এখনই একটি অনলাইন পাঠ্য সম্পাদকের মাধ্যমে সেগুলি পরীক্ষা করতে পারেন।

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

          শেয়ার করুন শেয়ার করুন টুইট ইমেইল বেসিক কোডিং শিখতে চান? আপনার অবসর সময়ে 5 টি কামড় আকারের কোডিং অ্যাপ ব্যবহার করে দেখুন

          বেসিক কোডিং শিখতে চান কিন্তু অল্প সময় আছে? এই কামড় আকারের কোডিং অ্যাপগুলি আপনার ব্যস্ত দিনের মাত্র কয়েক মিনিট সময় নেবে।

          পরবর্তী পড়ুন           সম্পর্কিত বিষয়
          • প্রোগ্রামিং
          • ওয়ার্ডপ্রেস
          • এইচটিএমএল
          • ওয়েব ডেভেলপমেন্ট
          • কোডিং টিউটোরিয়াল
          লেখক সম্পর্কে অ্যান্ডি বেটস(221 নিবন্ধ প্রকাশিত)

          অ্যান্ডি একজন প্রিন্ট সাংবাদিক এবং ম্যাগাজিন সম্পাদক যিনি 15 বছর ধরে প্রযুক্তি সম্পর্কে লিখছেন। সেই সময়ে তিনি অসংখ্য প্রকাশনায় অবদান রেখেছেন এবং বড় বড় প্রযুক্তি সংস্থার জন্য কপিরাইটিং কাজ তৈরি করেছেন। তিনি মিডিয়া এবং শিল্প ইভেন্টগুলিতে প্যানেল হোস্ট করার জন্য বিশেষজ্ঞ মন্তব্য প্রদান করেছেন।

          অ্যান্ডি বেটস থেকে আরো

          আমাদের নিউজলেটার সদস্যতা

          প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

          সাবস্ক্রাইব করতে এখানে ক্লিক করুন