এইচটিএমএল ছাত্র উপাদান

HTML হল একটি ওয়েব পেজের মেরুদণ্ড। এই ইউনিটে, আমরা দেখব কিভাবে একটি ওয়েব পৃষ্ঠার জন্য একটি কঠিন এবং অর্থপূর্ণ কাঠামো তৈরি করা যায়।

মূল গ্রহণ

  • শিক্ষার্থীরা HTML ফাইলের গঠন বুঝতে পারে।
  • শিক্ষার্থীরা জানে কিভাবে একটি ওয়েব পেজ তৈরি করতে সাধারণ ট্যাগ ব্যবহার করতে হয়।

HTML কি?

হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজের জন্য এইচটিএমএল সংক্ষিপ্ত। এটি এমন কোড যা আমরা ব্যবহার করি:

  • ডকুমেন্ট তৈরি করুন যা ওয়ার্ল্ড ওয়াইড ওয়েবে সংরক্ষিত এবং একটি ব্রাউজারে প্রদর্শিত হয়।
  • আমাদের ওয়েব পৃষ্ঠার জন্য একটি মৌলিক কাঠামো প্রদান করুন - ওয়েব পৃষ্ঠার হাড়।
  • আমাদের ব্রাউজার প্রদর্শনের জন্য পাঠ্য এবং চিত্রগুলির যথাযথ লোডিং নিশ্চিত করুন।

আমরা কখন HTML ব্যবহার করব?

আপনি ওয়ার্ল্ড ওয়াইড ওয়েবে দেখেন প্রতিটি ওয়েব পেজ HTML কোড ব্যবহার করে লেখা হয়। বোতাম, চিত্র, ফর্ম, পাঠ্যের বিভাগ - এই সমস্ত উপাদান যা HTML দিয়ে তৈরি করা হয়।

আমরা যদি আমাদের ওয়েব পেজটিকে মানবদেহ হিসেবে ভাবি, তাহলে HTML হল হাড়ের গঠন। আমরা CSS ব্যবহার করে শরীরে চামড়া এবং পোশাক যোগ করতে পারি, কিন্তু শুধুমাত্র একবার আমাদের সেই কঙ্কালের গঠনটি ঠিক হয়ে যায়।

এইচটিএমএল ইন অ্যাকশন

এইচটিএমএল এর মূল উপাদান আছে. উপাদানগুলি ট্যাগ দিয়ে তৈরি করা হয়।

বেশিরভাগ উপাদানের একটি খোলার ট্যাগ এবং একটি ক্লোজিং ট্যাগ থাকে:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

বিষয়বস্তু (পাঠ্য বা এমনকি অন্যান্য HTML উপাদান) যা আপনি ওয়েব পৃষ্ঠায় দেখতে চান তা এই ট্যাগগুলির মধ্যে স্থাপন করা যেতে পারে, যেমন একটি স্যান্ডউইচের স্তরগুলি বাসা বাঁধে৷

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

কিছু HTML বিষয়বস্তু স্ব-ক্লোজিং ট্যাগগুলির সাথে তৈরি করা হয় যেগুলির জন্য অতিরিক্ত ক্লোজিং ট্যাগের প্রয়োজন হয় না:

<img />
<link />

শুধুমাত্র এই একটি ট্যাগই যথেষ্ট কারণ এই উপাদানটির কাজ হল আপনার নথিতে একটি স্থান রাখা - অন্যান্য HTML উপাদানগুলির বিপরীতে, এই স্ব-বন্ধ উপাদানগুলির মধ্যে অন্যান্য উপাদান বা তথ্যকে নেস্ট করা সম্ভব নয়৷

একটি HTML উপাদানের অংশ

HTML উদাহরণ

এই কোডটি একটি ব্রাউজারে প্রদর্শিত হবে এবং নিচের ছবির মতো দেখতে হবে।

এই কোড... 

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... এই ওয়েব পেজ তৈরি করে

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

ফ্রেমিং

প্রসঙ্গ এবং উদ্দেশ্য

এইচটিএমএল মানে হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ। এটি পাঠ্যকে কাঠামোগত অর্থ দেওয়ার একটি উপায়। এটি কম্পিউটার এবং প্রোগ্রামারদের সহজেই টেক্সটের একটি অংশের উদ্দেশ্য কী তা নির্ধারণ করতে দেয়।

HTML কে একটি ওয়েবপৃষ্ঠার কঙ্কাল হিসাবে ভাবুন - এটি গঠন এবং বিষয়বস্তু প্রদান করে যখন জাভাস্ক্রিপ্ট এবং সিএসএস ইন্টারঅ্যাক্টিভিটি এবং স্টাইলিং প্রদান করে।

শেখার উদ্দেশ্য

শিক্ষার্থীরা পারবে

  • একটি HTML ফাইল তৈরি করুন এবং এটি তাদের সম্পাদক এবং ব্রাউজারে খুলুন
  • সঠিক কাঠামোর সাথে একটি HTML ফাইল সেট আপ করুন
  • তাদের ওয়েবসাইটে গঠন এবং বিষয়বস্তু যোগ করতে কিছু সাধারণ ট্যাগ তালিকাভুক্ত করুন এবং ব্যবহার করুন

শুরু করা

বিভাগ প্রণয়ন এবং উদ্দেশ্য

  • এইচটিএমএল একটি .html এক্সটেনশন সহ ফাইলের ভিতরে লেখা হয়।
  • আপনি আপনার এইচটিএমএল ফাইলগুলিকে আপনি যে কোনো নাম দিতে পারেন তবে, index.html হল ল্যান্ডিং পৃষ্ঠার জন্য ব্যবহৃত সবচেয়ে সাধারণ নাম যদি না বিকাশকারীর সার্ভারটি কনফিগার করার কারণ থাকে৷ 
# creating an html file on the command line
touch index.html
# opening your html file in your browser
open index.html

মিনি-চ্যালেঞ্জ

  1. আপনি চান এমন যেকোনো নাম দিয়ে 3টি অতিরিক্ত HTML ফাইল তৈরি করুন।
  2. আপনার টেক্সট এডিটর এবং ব্রাউজারে ফাইলগুলির একটি খুলুন।

একটি HTML পৃষ্ঠার কাঠামো

বিভাগ প্রণয়ন এবং উদ্দেশ্য

একটি HTML নথি সবসময় একই কাঠামো দিয়ে শুরু করা উচিত:

  • DOCTYPE ট্যাগটি বিশেষ এবং বন্ধ হয় না। এটি একমাত্র ট্যাগ যেটিতে অ-আলফা-সংখ্যাসূচক (অক্ষর/সংখ্যা) মান থাকতে পারে।
  • <head> আপনার ওয়েবসাইট সম্পর্কে তথ্য রয়েছে, কিন্তু প্রকৃত বিষয়বস্তু নয় যা পৃষ্ঠায় প্রদর্শিত হবে।
  • <body> আপনার পৃষ্ঠার সমস্ত বিষয়বস্তু ধারণ করে যা আসলে পর্দায় প্রদর্শিত হবে।
  • আপনার পৃষ্ঠার কাঠামো তৈরি করতে আপনি যে ট্যাগগুলি ব্যবহার করবেন তা <body> ট্যাগের মধ্যে স্থাপন করা উচিত।
  • ওপেনিং এবং ক্লোজিং ট্যাগগুলির মধ্যে, আমরা উপাদানটির পাঠ্য বা "কন্টেন্ট" সন্নিবেশ করি। চূড়ান্ত ফলাফল দেখতে এইরকম হবে: <example-tag>Content Goes in here</example-tag> >। ট্যাগগুলি অন্যান্য ট্যাগের মধ্যেও স্থাপন করা যেতে পারে।
  • মনে রাখবেন যে অন্য ট্যাগের ভিতরে একটি ট্যাগ স্থাপন করার সময়, আপনাকে নতুন ট্যাগটি ইন্ডেন্ট করতে হবে যাতে দেখা যায় এটি তার মূল ট্যাগের একটি শিশু ।

শব্দভান্ডার

  • উপাদান - আইটেম (যেমন ছবি, অনুচ্ছেদ, এবং শিরোনাম) HTML কোড দিয়ে তৈরি।
  • ট্যাগ - কোডের বিট যা নির্দেশ করে যে নির্দিষ্ট উপাদানগুলি কোথায় শুরু হয় এবং শেষ হয়।
  • শিশু - উপাদানগুলি অন্যান্য উপাদানগুলির ভিতরে থাকে৷
  • অভিভাবক - উপাদান যা অন্যান্য উপাদান ধারণ করে।

HTML উদাহরণ

দ্রষ্টব্য: নিম্নলিখিত শুধুমাত্র রেফারেন্সের জন্য একটি উদাহরণ; আপনার এখনই সব বোঝার দরকার নেই, তবে ভাল ফর্ম্যাট করা এইচটিএমএল দেখতে কেমন হতে পারে তা দেখতে ভাল।

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

মিনি-চ্যালেঞ্জ

  1. আপনার তৈরি করা ফাইলগুলির একটি খুলুন এবং মৌলিক HTML ট্যাগ কাঠামো যোগ করুন।
  2. আপনার ফ্যামিলি ট্রি (বা অন্য কারো ফ্যামিলি ট্রি) দেখানোর জন্য HTML বডি সেটআপ করুন। একটি ফ্যামিলি গ্রুপ ধরে রাখতে একটি section ট্যাগ ব্যবহার করুন। পরিবারের সদস্যদের ধরে রাখতে একটি p ট্যাগ ব্যবহার করুন। পরিবারগুলি জটিল, কিন্তু একটি উদাহরণ হতে পারে: 
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

সাধারণ ট্যাগ

বিভাগ প্রণয়ন এবং উদ্দেশ্য

সাধারণভাবে, আমরা আমাদের নিজস্ব ধরনের উপাদান তৈরি করি না। পরিবর্তে পূর্বনির্ধারিত উপাদানগুলির একটি সেট রয়েছে যার সাথে কার্যকারিতা ইতিমধ্যেই যুক্ত।

কোড ব্লকের উদাহরণের ব্রেক ডাউনের জন্য HTML রেফারেন্স দেখুন 

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

মিনি-চ্যালেঞ্জ

  1. আপনার আগ্রহ প্রতিফলিত করতে উপরের সমস্ত বিষয়বস্তু সংশোধন করুন।
  2. পাঠের শুরুতে আপনার তৈরি করা অন্য ফাঁকা html ফাইলগুলির মধ্যে একটিতে, আপনি শিরোনাম, শিরোনাম এবং উপশিরোনাম সহ একটি সংবাদ নিবন্ধ তৈরি করছেন এমন ভান করুন (বিষয়বস্তু নিয়ে ভাবতে পারছেন না? আপনি যখন ভ্রমণ করছেন এমন একদিনের কথা লিখুন। আপনি যে মিনি ট্রিপগুলি নিয়েছিলেন, যে জায়গাগুলিতে গিয়েছিলেন, আপনি যে খাবার খেয়েছিলেন সেগুলি সম্পর্কে চিন্তা করুন)।
  3. প্রাসঙ্গিক ট্যাগ ব্যবহার করুন এবং কিছু বিষয়বস্তু যোগ করুন যাতে আপনার সংবাদ নিবন্ধ আপনার ওয়েবসাইটে প্রদর্শিত হয়।
  4. যাচাই করুন যে আপনার সামগ্রী আপনার ব্রাউজারে প্রদর্শিত হচ্ছে!
  5. স্ট্রেচ: একটি ফর্ম তৈরি করুন যা কেউ আপনাকে আপনার নিবন্ধ সম্পর্কে একটি মন্তব্য পাঠাতে পূরণ করতে পারে। যদিও এটি এখনও কাজ করবে না (আমাদের কাছে এটি জাভাস্ক্রিপ্টের সাথে সংযুক্ত নেই), HTML এ এই ফর্মটি তৈরি করা আমাদেরকে দেখাতে পারে কিভাবে আমরা একটি কার্যকরী ফর্ম তৈরি করব।

প্রসঙ্গ

HTML হল ওয়ার্ল্ড ওয়াইড ওয়েবের বিষয়বস্তুর ভাষা।

আপনার HTML ফাইলগুলিতে নেভিগেট করতে এবং খুলতে আপনি কমান্ড লাইন ব্যবহার করবেন। আপনার HTML ফাইলগুলি বিভিন্ন ফাংশন দ্বারা গঠিত জাভাস্ক্রিপ্ট স্ক্রিপ্টিং ব্যবহার করে লিখিত CSS শৈলী এবং আচরণের সাথে পরিবর্ধন করা হবে। HTML ফাইলগুলিও Google App ইঞ্জিন দ্বারা ব্যবহৃত টেমপ্লেট হবে এবং একটি ডাটাবেস থেকে পপুলেট করা হবে৷

এইচটিএমএল ইন অ্যাকশন

HTML দিয়ে শুরু করা

এইচটিএমএল একটি .html এক্সটেনশন সহ ফাইলের ভিতরে লেখা হয়।

আপনার পৃষ্ঠা দেখা হচ্ছে

ম্যাকে একটি HTML ফাইলের পূর্বরূপ দেখতে: কমান্ড লাইনে, আপনার HTML পৃষ্ঠা সহ ফোল্ডারে নেভিগেট করুন এবং আপনার HTML ফাইলের নামের সাথে "ফাইলের নাম" প্রতিস্থাপন করে ওপেন ফাইলের নাম টাইপ করুন।

সাধারণ সিনট্যাক্স 

<tag>
  Content
</tag>

উপাদানগুলি নেস্টেড

এইচটিএমএল উপাদান অন্যান্য উপাদানের ভিতরে স্থাপন করা যেতে পারে: 

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

একটি HTML পৃষ্ঠার গঠন

প্রতিটি ওয়েব পৃষ্ঠার একটি মৌলিক কাঠামো আছে যা একই। এটি এই মত দেখায়: 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <head> আপনার ওয়েবসাইট সম্পর্কে তথ্য ধারণ করে, কিন্তু প্রকৃত বিষয়বস্তু নয় যা পৃষ্ঠায় প্রদর্শিত হবে (এটিকে আপনার ওয়েব পৃষ্ঠার 'মস্তিষ্ক' হিসাবে মনে করুন)।
  • <body> আপনার পৃষ্ঠার সমস্ত বিষয়বস্তু ধারণ করে যা আসলে পর্দায় প্রদর্শিত হবে।

সাধারণ উপাদান

একটি পৃষ্ঠায় সামগ্রী যোগ করতে <body> এবং </body> ট্যাগের ভিতরে এই সাধারণ উপাদানগুলি ব্যবহার করুন।

অনুচ্ছেদ

একটি অনুচ্ছেদ তৈরি করতে, p খোলার এবং বন্ধ করার ট্যাগগুলি ব্যবহার করুন: 

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

মন্তব্য করুন

চূড়ান্ত রেন্ডার করা HTML কে প্রভাবিত না করে আপনার কোড পড়া সহজ করতে মন্তব্যগুলি ব্যবহার করুন৷ 

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

শিরোনাম 

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

জেনেরিক <div> 

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

তালিকা

তালিকার আইটেমগুলির তালিকা, <li> , হয় একটি ক্রমবিহীন তালিকা ট্যাগ, <ul> , অথবা একটি অর্ডারকৃত তালিকা ট্যাগ, <ol> দিয়ে মোড়ানো হয়। 

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

ছবি

<img> ট্যাগের জন্য src অ্যাট্রিবিউট ব্যবহার করে ছবির ঠিকানা নির্দিষ্ট করা প্রয়োজন এবং ঐচ্ছিক alt অ্যাট্রিবিউটটি স্ক্রিন রিডার সহ অ্যাক্সেসযোগ্যতার জন্য ব্যবহার করা হয়। 

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

হাইপারলিঙ্কের জন্য, <a> ট্যাগের জন্য href অ্যাট্রিবিউট ব্যবহার করে হাইপারলিঙ্ক গন্তব্যের ঠিকানা উল্লেখ করতে হবে। 

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

অনুভূমিক নিয়ম 

<!-- This self-closing tag creates a line across your web page. -->
<hr>

বিরতি 

<!-- This self-closing tag creates a line break between elements. -->
<br>

ফর্ম

একটি <form> ব্যবহারকারীর কাছ থেকে তথ্য সংগ্রহ করতে ব্যবহৃত হয়। একটি <form> কাজ করার জন্য, এটিকে সংগ্রহ করা ডেটা পাঠাতে হবে প্রক্রিয়াকরণ বা পরিচালনা করার জন্য। তাই, <form>এর জন্য প্রায়ই অতিরিক্ত বৈশিষ্ট্যের প্রয়োজন হয়:

  • action - ফর্ম জমা দেওয়ার সময় ফর্ম ডেটার গন্তব্য৷
  • method - একটি GET বা একটি POST ধরনের অনুরোধ ব্যবহার করে ডেটা প্রক্রিয়া করা উচিত কিনা তা নির্দেশ করে। 
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

ইনপুট

<input> তথ্য সংগ্রহ করার জন্য <form> দ্বারা ব্যবহৃত উপাদান।

একটি <input> উপাদানের সাধারণত একটি name বৈশিষ্ট্য থাকে যা ডেটাবেস দ্বারা জমা দেওয়া ডেটার অন্তর্গত ফিল্ড সনাক্ত করতে ব্যবহৃত হয়। 

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

<input> উপাদানটি খুবই বহুমুখী: type অ্যাট্রিবিউট নির্দিষ্ট করে, এটি একটি পাঠ্য ক্ষেত্র, ক্যালেন্ডার-স্টাইল তারিখ পিকার, রেডিও বোতাম, ড্রপডাউন এবং আরও অনেক কিছু হিসাবে রেন্ডার করা যেতে পারে। আরও সম্পূর্ণ তালিকা দেখতে আপনি কিছু বাহ্যিক ডকুমেন্টেশনের সাথে পরামর্শ করতে পারেন।

টিপস এবং কৌশল

  • অন্যান্য বিকাশকারীরা একটি ওয়েব পৃষ্ঠায় কিছু যোগ করার জন্য কী ট্যাগ ব্যবহার করেছে তা দেখতে ওয়েব পৃষ্ঠাগুলির কোড পরিদর্শন করে কী কী HTML ট্যাগ পাওয়া যায় তা জানুন৷
  • আপনি যা যোগ করতে চান তা খুঁজে না পেলে, বিকাশকারী ডকুমেন্টেশন চেক করুন। এগুলি সমস্ত সম্ভাব্য HTML উপাদানগুলির কিছু তালিকা https://www.w3schools.com/Tags/ , https://developer.mozilla.org/en-US/docs/Web/HTML/Element , http://html-css-js.com/html/tags/
  • HTML লেখার সময়, যে উপাদানগুলির জন্য একটি ওপেনিং এবং একটি ক্লোজিং ট্যাগ প্রয়োজন, ট্যাগগুলির মধ্যে বিষয়বস্তু যোগ করার আগে প্রথমে ট্যাগটি খুলুন এবং বন্ধ করা ভাল। এইভাবে আপনি ঝুলন্ত ট্যাগ সঙ্গে বাকি থাকবে না.
  • আপনার কোডে HTML উপাদানগুলির নেস্টেড প্রকৃতিটি সর্বোত্তমভাবে দেখতে, অন্যান্য উপাদানগুলির ভিতরে থাকা উপাদানগুলিকে ইন্ডেন্ট করুন৷ এটি আপনাকে আপনার HTML সামগ্রীর গঠন দ্রুত চিনতে সাহায্য করবে৷
  • অনেক মন্তব্য ব্যবহার করুন! এগুলি আপনাকে আপনার নিজের কোডের সমস্যা সমাধানে সহায়তা করবে এবং আপনি যখন অন্যদের এটি পর্যালোচনা করতে বলবেন তখন তাদের সাহায্য করবে৷
  • html5boilerplate.com- এর মতো ওয়েবে রিসোর্স আপনাকে দ্রুত HTML লেখা শুরু করতে সাহায্য করতে পারে।

সর্বোত্তম অনুশীলনের সারাংশ

  • একটি ওয়েব পৃষ্ঠা সম্পর্কে তথ্য একটি HTML নথির <head> এ যায়: শিরোনাম, মেটাডেটা, শৈলীর লিঙ্ক ইত্যাদি।
  • একটি ওয়েব পৃষ্ঠার তথ্য একটি HTML নথির <body> এ যায়।
  • একটি HTML নথির সামগ্রী তৈরি করতে বিকাশকারীরা ব্যবহার করতে পারেন এমন অনেক উপাদান রয়েছে, যার মধ্যে রয়েছে: <p> , <h1> - <h6> , <div> , <li> , <img> , <a> , <hr> , <br> , <!-- --> , এবং আরও অনেক কিছু৷
  • কিছু উপাদানের জন্য একটি খোলার ট্যাগ এবং একটি ক্লোজিং ট্যাগ প্রয়োজন: <p></p> ।
  • অন্যান্য উপাদানগুলি স্ব-বন্ধ হয়, তাই তাদের শুধুমাত্র একটি খোলার ট্যাগ প্রয়োজন: <img> ।
  • ট্যাগগুলিতে বৈশিষ্ট্যগুলি অন্তর্ভুক্ত থাকতে পারে ( src , alt , id , ইত্যাদি) যা একটি উপাদানকে কীভাবে আচরণ করা উচিত সে সম্পর্কে আরও তথ্য প্রদান করে: <img src="filename.png" alt="description"> ।
  • মন্তব্য, <!-- --> , ডেভেলপারদের নোট প্রদান করে যা একটি ওয়েব পৃষ্ঠার বিভাগগুলি কী করে তা বোঝার জন্য দরকারী।
  • পৃষ্ঠাটি কীভাবে তৈরি করা হয়েছে তা পরীক্ষা করতে ওয়েব পৃষ্ঠাগুলির HTML কোড পরিদর্শন করতে আপনার ব্রাউজারে অন্তর্নির্মিত বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন৷

প্রশ্ন 1

নিচের কোন উপাদানটি শিশু উপাদান? (এই অনুশীলনের উদ্দেশ্যে বডি/এইচটিএমএল উপাদানগুলি উপেক্ষা করুন) 

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. পি
  3. ক
  4. h1 এবং p

প্রশ্ন 2

একটি HTML নথিতে, __ <head> উপাদানে যায় এবং __ <body> উপাদানে যায়।

  1. গঠন, মেটাডেটা
  2. মেটাডেটা, গঠন
  3. শিরোনাম, ছোট বিষয়বস্তু
  4. সাইটের হেডার, সাইটের প্রধান বিষয়বস্তু

প্রশ্ন 3

নিচের কোনটি নেস্টেড এলিমেন্ট ইন্ডেন্ট করার ভালো কারণ নয়?

  1. ইন্ডেন্টিং অন্যান্য উপাদানে কোন উপাদান রয়েছে তা দেখতে সহজ করে তোলে
  2. ইন্ডেন্ট করা মানুষের জন্য ওয়েব পৃষ্ঠার গঠন পড়া সহজ করে তোলে
  3. ইন্ডেন্টিং বট/সার্চ ইঞ্জিনের জন্য ওয়েব পৃষ্ঠার কাঠামো পড়া সহজ করে তোলে
  4. ইন্ডেন্টিং ভাইবোন উপাদান সনাক্ত করা সহজ করে তোলে

প্রশ্ন 4

নিচের কোনটি HTML উপাদানের একটি বৈশিষ্ট্য? 

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. সাইডবার
  4. সাইডবার এখানে যায়!

প্রশ্ন 5

নিচের এইচটিএমএল এলিমেন্টের কয়টি বৈশিষ্ট্য আছে? 

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

প্রশ্ন 6

নিম্নলিখিত HTML স্নিপেটে একটি সম্পর্ক প্রদর্শন করে, কোন উপাদানটি একটি মূল উপাদান? 

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

প্রশ্ন 7

নিম্নলিখিত এইচটিএমএল স্নিপেটের কয়টি উপাদান একটি শিশু থেকে পিতামাতার উপাদান?

(র্যাপিং <body> বা <html> উপাদান গণনা করবেন না) 

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

প্রশ্ন 8

যদিও কিছু ব্রাউজার নিম্নলিখিত HTML স্নিপেট সঠিকভাবে রেন্ডার করবে, এতে সমস্যা কি? 

<img src=puppies.png width=400 />
  1. এটার কোনো ক্লোজিং ট্যাগ নেই
  2. গুণাবলীর মানগুলির চারপাশে উদ্ধৃতি থাকা উচিত
  3. width বৈশিষ্ট্য প্রদান করার জন্য height বৈশিষ্ট্য প্রয়োজন
  4. এটি একটি প্রয়োজনীয় বৈশিষ্ট্য অনুপস্থিত

প্রশ্ন 1

নিচের কোন উপাদানটি শিশু উপাদান? (এই অনুশীলনের উদ্দেশ্যে বডি/এইচটিএমএল উপাদানগুলি উপেক্ষা করুন) 

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

a উপাদান একটি শিশু উপাদান কারণ এটি অন্য উপাদানের মধ্যে রয়েছে।

প্রশ্ন 2

একটি HTML নথিতে, __ <head> উপাদানে যায় এবং __ <body> উপাদানে যায়।

মেটাডেটা <head> এলিমেন্টে যায় এবং গঠন <body> এলিমেন্টে যায়। <head> উপাদানের কিছুই ওয়েবপেজেই দৃশ্যমান হবে না।

প্রশ্ন 3

নিচের কোনটি নেস্টেড এলিমেন্ট ইন্ডেন্ট করার ভালো কারণ নয়?

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

প্রশ্ন 4

নিচের কোনটি HTML উপাদানের একটি বৈশিষ্ট্য? 

<div class="sidebar">Sidebar goes here!</div>

class হল অ্যাট্রিবিউট - অ্যাট্রিবিউটগুলি একটি HTML উপাদানের মধ্যে যায় এবং সাধারণত একটি মান থাকে (কিন্তু থাকতে হবে না)।

প্রশ্ন 5

নিচের এইচটিএমএল এলিমেন্টের কয়টি বৈশিষ্ট্য আছে? 

<input type="text" placeholder="username" name="username" />

উপরের input উপাদানটিতে 3টি বৈশিষ্ট্য রয়েছে - type , placeholder এবং name ।

প্রশ্ন 6

নিম্নলিখিত HTML স্নিপেটে একটি সম্পর্ক প্রদর্শন করে, কোন উপাদানটি একটি মূল উপাদান? 

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> একটি মূল উপাদান কারণ এতে অন্যান্য উপাদান রয়েছে।

প্রশ্ন 7

নিম্নলিখিত এইচটিএমএল স্নিপেটের কয়টি উপাদান একটি শিশু থেকে পিতামাতার উপাদান?

(র্যাপিং <body> বা <html> উপাদান গণনা করবেন না) 

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

স্নিপেটে 4টি চাইল্ড এলিমেন্ট আছে - মূলত, যে কোন এলিমেন্টের উপরে একটি প্যারেন্ট আছে, তাই <div> এলিমেন্ট - <h1> , <p> , <i> , <a> ছাড়া অন্য কিছু।

প্রশ্ন 8

যদিও কিছু ব্রাউজার নিম্নলিখিত HTML স্নিপেট সঠিকভাবে রেন্ডার করবে, এতে সমস্যা কি? 

<img src=puppies.png width=400 />

গুণাবলীর মানগুলির চারপাশে উদ্ধৃতি থাকা উচিত। <img /> একটি সেল্ফ ক্লোজিং ট্যাগ, এবং এর কোনো প্রয়োজনীয় বৈশিষ্ট্য নেই। height ছাড়া width থাকা ঠিক আছে এবং তদ্বিপরীত।