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 সাধারণত দুই ভাবে প্রকাশ করা যায়। যথা -

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

Internal link ও
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:

Google

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

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

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

ওয়েব পেইজে ছবি যোগ করার জন্য <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	এখানে ছবিটি কোন কারনে দেখানো না গেলে তার পরিবর্তে এই টেক্সটি দেখানো হয়।

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:

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

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 Excercise

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

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>

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

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>

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

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>