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

HSC ICT Chapter 4 Part 5 main point: এইচটিএমএল লিস্ট (HTML List) কি?, Example Of Order List, Example Of unorder List, হাইপারলিংক (Hyperlink) কি?, কিভাবে ওয়েব পেইজে ছবি যোগ করা হয়?, টেবিল (Table) কি?, টেবিল ট্যাগের কিছু উদাহরন।


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

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

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

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

  1. <ol>...<ol> বা <ul>...</ul>
  2. <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:

শপিং লিস্টঃ

  1. Shirt
  2. Pant
  3. Shoes

শপিং লিস্টঃ

  1. Shirt
  2. Pant
  3. Shoes

শপিং লিস্টঃ

  1. Shirt
  2. Pant
  3. Shoes

Example Of Unorder 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 হাইপারলিংক কে সাধারণত দুই ভাবে ভাগ করা যায়।যথা -

  1. Internal link ও
  2. External link ।

Example

Example Of video audio

  
  <!DOCTYPE html> 
  <html>
    <head>
     <title>Anchor Tag example</title>
    </head>
    <body>
    <a href="https://www.google.com/">Google</a>
    </body>
  </html>
  
  

Output:


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

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

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

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

<img src ="image_path" বা "URL"> তাছাড়া ও <img> ট্যাগ এ height, width এবং alt = Alter Text (কোন কারনে ছবি প্রদর্শিত না হলে এই লেখাটি প্রদর্শিত হয় ) অ্যাটিবিউট ব্যবহার করা যায়।

<img src ="image_path" বা "URL" width="100%" height="300px" alt="Dog image">
src এখানে ছবিটির কোথায় আছে তার সঠিক পাথটি দিতে হয়।
width এখানে ছবিটির প্রস্থ কতখানি সেটি বোঝানো হয়।
height এখানে ছবিটির উচ্চতা কতখানি সেটি বোঝানো হয়।
alt এখানে ছবিটি কোন কারনে দেখানো না গেলে তার পরিবর্তে এই টেক্সটি দেখানো হয়।
image tag in html


Example Of video audio

  
  <!DOCTYPE html> 
  <html>
    <head>
     <title>Image Adding</title>
    </head>
    <body>
    <img src="images/hsc/ict.png" height="300px" width="300px" alt="Ict Image">
    </body>
  </html>
  
  

Output:

Ict Image


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

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 দেওয়া যায়।

All HTML Table Tags

Open Tag Close Tag Description
<table> </table> টেবিল তৈরিতে প্রধান ট্যাগ হিসাবে ব্যবহার করতে হয়।
<th> </th> টেবিলের হেডিং তৈরিতে এই ট্যাগ ব্যবহার করতে হয়।
<tr> </tr> টেবিলের সারি তৈরিতে এই ট্যাগ ব্যবহার করতে হয়।
<td> </td> টেবিলের প্রতিটি কলামে ডেটা দিতে এই ট্যাগ ব্যবহার করতে হয়।
<caption> </caption> টেবিলের শিরোনাম দিতে এই ট্যাগ ব্যবহার করতে হয়।
<thead> </thead> টেবিলের হেডিং গুলোকে একই গ্রুপ এহ রাখার জন্য এই ট্যাগ ব্যবহার করা হয়।
<tbody> </tbody> টেবিলের বডিকে একই গ্রুপ এহ রাখার জন্য এই ট্যাগ ব্যবহার করা হয়।
<tfoot> </tfoot> টেবিলের ফুটার গুলোকে একই গ্রুপ এহ রাখার জন্য এই ট্যাগ ব্যবহার করা হয়।

উদাহরনঃ


  <!DOCTYPE html> 
  <html>
   <head>
     <title>Table</title>
   </head>
   <body>
    <table border="1px" width="100%"> 
     <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:

Table example

Table Excercise

টেবিল উদাহরন ১ঃ

Table Excercise 1

Solution:


  <!DOCTYPE html> 
  <html>
   <head>
     <title>Table-1 Solve</title>
   </head>
   <body>
    <table border="1px" width="100%" style="border-collapse: collapse;"> 
     <tr>
       <th>Student Name</th> 
       <th colspan="3">Harry Porter</th>
     </tr>
     <tr>
       <th rowspan="3">Compulsory</th> 
       <td colspan="3">Bangla</td>  
     </tr>
     <tr>
       <td colspan="3">English</td>  
     </tr>
     <tr>
       <td colspan="3">ICT</td>  
     </tr>
     <tr>
       <th>Optional</th>
       <td>Physics</td> 
       <td>Math</td>
       <td>Biology</td>
     </tr>
    </table>  
  </body>
  </html>


টেবিল উদাহরন ২ঃ

Table Excercise 2

Solution:

  
  <!DOCTYPE html> 
  <html>
    <head>
      <title>Table-1 Solve</title>
    </head>
    <body>
      <table border="1px" width="100%" style="border-collapse: collapse;"> 
        <tr>
          <th colspan="3">Bangladesh</th> 
        </tr>
        <tr>
          <td rowspan="3">
            Rivers:
            <ul type="square">
              <li>Padma </li>
              <li>Megna </li>
            </ul>
          </td>
          <td colspan="2" style="text-align:center;">Padma Division </td>
        </tr>
        <tr>
          <td>Faridpur</td>
          <td>Gopalgonj</td>
        </tr>
        <tr>
          <td colspan="2" style="text-align:center;">Shariatpur</td>
        </tr>
      </table>  
  </body>
  </html>
  
  

টেবিল উদাহরন ৩ঃ

Table Excercise 3

Solution:

  
  <!DOCTYPE html> 
  <html>
    <head>
      <title>Table-1 Solve</title>
    </head>
    <body>
    <table border="1px" width="100%" style="text-align:center; border-collapse: collapse;"> 
      <tr>
      <th colspan="2">Heading1</th>
        <th>Heading2</th>
      </tr>
      <tr>
        <td rowspan="2">(A+B)<sup>2</sup></td>
        <td>&nbsp;</td>
        <td rowspan="2">R</td>
      </tr>
      <tr>
        <td>S</td>
      </tr>
      <tr>
        <td colspan="2">H<sub>2</sub>SO<sub>4</sub></td>
        <td>&nbsp;</td>
      </tr>
    </table>  
  </body>
  </html>