ITI COPA

HTML PRACTICAL - USING 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>

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

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

आउटपुट :