HTML Practicals | List and Table Tags

HTML प्रेक्टिकल - लिस्ट एवं टेबल टैग्स | HTML Practical - List and Table Tags

आईटीआई कोपा प्रेक्टिकल्स – वेब डिजाईन विद HTML

Objective : LIST & TABLE टैग्स का प्रयोग

प्रायोगिक कार्य के द्वारा आप सीखेंगे :

HTML लिस्ट टैग्स के विभिन्न प्रकार एवं उनका उपयोग

HTML टेबल टैग्स के विभिन्न प्रकार एवं उनका उपयोग

Requirements : (Tools / Equipments / Instruments)

पर्सनल कंप्यूटर / माइक्रोसॉफ्ट विंडोज / नोटपैड / वेब ब्राउज़र

प्रैक्टिकल 4 - HTML में UNORDERED एवं ORDERED LIST का प्रयोग

Step 1 : नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए

<html>
<body>
<h2> An Unordered HTML List </h2>
<ul>
<li> Coffee </li>
<li> Tea </li>
<li> Milk </li>
</ul>
<h2> An Ordered HTML List </h2>
<ol>
<li> Coffee </li>
<li> Tea </li>
<li> Milk </li>
</ol>
</body>
</html>

Step 2 : ऊपर लिखे गए HTML Code को आप LIST.html के नाम से Save कीजिए।

Step 3 : LIST.html फाइल को Open कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी। यह इस प्रकार दिखाई देगी.

आउटपुट :

प्रैक्टिकल 4.1 - HTML में Description List, Description Term, एवं Description Details का प्रयोग

Step 1 : नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए

<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html

Step 2 : ऊपर लिखे गए HTML Code को आप Description List.html के नाम से Save कीजिए।

Step 3 : Description List.html फाइल को Open कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी। यह इस प्रकार दिखाई देगी.

आउटपुट :

प्रैक्टिकल 4.3 - HTML में TABLE टैग्स प्रयोग

Step 1 : नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए

<html>
<body>
<h2>Table Example with Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>

<table border="1">
<caption> Monthly savings </caption>
  <tr>
    <th> Month </th>
    <th> Income </th>
      <th> Savings </th>
</tr>
  <tr>
    <td> January </td>
    <td> 16000 </td>
      <td> 1000 </td>
</tr>

<tr>
    <td> February </td>
      <td> 18000 </td>
    <td> 1500 </td>
</tr>
</table>
</body>
</html>

Step 2 : ऊपर लिखे गए HTML Code को आप table.html के नाम से Save कीजिए।

Step 3 : table.html फाइल को Open कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी। यह इस प्रकार दिखाई देगी.

आउटपुट :

प्रैक्टिकल 4.4 - HTML में TABLE टैग्स thead, tbody, एवं tfoot प्रयोग

Step 1 : नोटपैड में निम्नानुसार HTML कोड टाइप कीजिए

<html>
<head>
</head>
<body>
<h2>The thead, tbody, and tfoot elements</h2>
<table border="1">
<thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>January</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>1500</td>
    </tr>
</tbody>
<tfoot>
    <tr>
      <td>Sum</td>
      <td>2500</td>
    </tr>
</tfoot>
</table>
</body>
</html>