HSC ICT Chaper 4 Part 5 | Introduction to Web Design and HTML Part 5

HSC ICT Chapter 4 Part 5 :

এইচটিএমএল লিস্ট (HTML List) কি?

ওয়েব পেইজ এ বিভিন্ন বিষয়ে লিস্ট আকারে প্রকাশ করতে list element ব্যবহার করা হয়। List সাধারণত দুই ভাবে প্রকাশ করা যায়। যথা -

নাম্বার যুক্ত (ordered বা numbered) যাকে <ol> দিয়ে প্রকাশ করা হয়।
নাম্বার হীন (unordered বা non numbered) যাকে <ul> দিয়ে প্রকাশ করা হয়।

List আকারে এছাড়াও menu,director বা definition list এর মাধ্যমেও list প্রকাশ করা হয়।List element এর গঠন (syntax) হলো -

<ol>...<ol> বা <ul>...</ul>
<li> দিয়ে আইটেম (ITEM) এ বিভক্ত করতে ব্যবহৃত হয়।

Example Of Order List


<!DOCTYPE html> 
<html>
  <head>
   <title>List example</title>
  </head>
  <body>
  <h4>শপিং লিস্টঃ</h4> 
  <ol>
   <li>Shirt</li>
   <li>Pant</li>
   <li>Shoes</li>
  </ol>

  <h4>শপিং লিস্টঃ</h4> 
  <ol type="I">
   <li>Shirt</li>
   <li>Pant</li>
   <li>Shoes</li>
  </ol>

  <h4>শপিং লিস্টঃ</h4> 
  <ol type="a">
   <li>Shirt</li>
   <li>Pant</li>
   <li>Shoes</li>
  </ol>
  </body>
</html>

Output:

শপিং লিস্টঃ

Shirt
Pant
Shoes

শপিং লিস্টঃ

Shirt
Pant
Shoes

শপিং লিস্টঃ

Shirt
Pant
Shoes

Example Of Order List


<!DOCTYPE html> 
<html>
  <head>
   <title>List example</title>
  </head>
  <body>
  <h4>শপিং লিস্টঃ</h4> 
  <ul>
   <li>Shirt</li>
   <li>Pant</li>
   <li>Shoes</li>
  </ul>
  </body>
</html>

Output:

শপিং লিস্টঃ

Shirt
Pant
Shoes

হাইপারলিংক (Hyperlink) কি?

ওয়েবসাইটে একটি পেইজের সাথে আর একটি পেইজ সংযুক্ত করতে হাইপারলিংক ব্যবহৃত হয়। হাইপারলিংক হল ওয়েবের একটি রিসোর্সে অবস্থিত কোন রেফারেন্স। Text,image, sound, video, ইত্যাদি রিসোর্সকে হাইপারলিংক দিয়ে নির্দেশ করা যায়। হাইপার লিংক করার জন্য <a> বা <anchor> tag ব্যবহার করা হয়।

হাইপারলিংক এর গঠন ( syntax) হলো -

<a href= "url" > Text / image/sound /video ইত্যাদি </a>
এখানে herf = hyper reference হাইপারলিংক কে সাধারণত দুই ভাবে ভাগ করা যায়।যথা -

Internal link ও
External link ।

Example

হাইপারলিংক এর সুবিধাসমূহ -

খুব সহজেই বিভিন্ন ওয়েব পেইজ ভিজিট করা যায়।
সময় বাঁচে।
সহজেই রেফারেন্স তৈরি করা যায়, ইত্যাদি।

কিভাবে ওয়েব পেইজে ছবি যোগ করা হয়?

ওয়েব পেইজে ছবি যোগ করার জন্য <img>নামের HTMLট্যাগের সাথে src নামের attribute ব্যবহৃত হয় । ছবি যোগ করার গঠন (syntax)হলো -

<img src ="image_path" বা "URL">

তাছাড়া ও <img> ট্যাগ এ heightএবং width অ্যাটিবিউট ব্যবহার করা যায়।

কিভাবে ওয়েব পেইজে অডিও / ভিডিও যোগ করা হয়?

Example Of video audio


<!DOCTYPE html> 
<html>
  <head>
   <title>Audio / Video example</title>
  </head>
  <body>
  <audio controls autoplay muted >  
    <source src="horse.mp3" type="audio/mpeg">
  </audio>

  <video width="320" height="240" controls>  
    <src="movie.mp4" type="video/mp4">
  </video>
  </body>
</html>

Output:

টেবিল (Table) কি?

টেবিল ওয়েবপেইজের একটি গুরুত্বপূর্ণ বিষয়। যা ওয়েব পেইজের তথ্যকে সারি এবং কলাম আকারে বিন্যস্ত করে প্রদর্শনের জন্য ব্যবহৃত হয়। HTML এ টেবিল তৈরিতে <table> ট্যাগ ব্যবহৃত হয়। আর এই ট্যাগের অভ্যন্তরে <tr>........</tr> দ্বারা সারি (row), <td>....... </td> দ্বারা টেবিলের ডেটা তৈরিতে ব্যবহৃত হয়। <th>...........</th>দ্বারা টেবিলের হেডিং বোঝানোর জন্য এবং <caption>.........</caption> দ্বারা টেবিলের caption দেওয়া যায়।

টেবিল ট্যাগের কিছু উদাহরনঃ


  <!DOCTYPE html> 
  <html>
   <head>
     <title>Table</title>
   </head>
   <body>
    <table border="1px"> 
     <tr>
       <th>Name</th> 
       <th>Roll</th>
       <th>ID</th>
     </tr>
     <tr>
       <td>Md Robin Khan</td> 
       <td>1</td>
       <td>124-12-1222</td>
     </tr>
     <tr>
       <td>Md Rabbi Khan</td> 
       <td>2</td>
       <td>124-12-1223</td>
     </tr>
     <tr>
       <td>Md Rohin Khan</td> 
       <td>3</td>
       <td>124-12-1442</td>
     </tr>
    </table>  
  </body>
  </html>

Output:

Name	Roll	ID
Md Robin Khan	1	124-12-1222
Md Rabbi Khan	2	124-12-1223
Md Rohin Khan	3	124-12-1442