ITI COPA

HTML PRACTICAL - USING LIST AND TABLE TAGS

HTML Practicals | List and Table Tags

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

HTML 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 कीजिए। आपकी फाईल आपके डिफ़ॉल्ट ब्राउज़र में ओपन हो जाएगी। यह इस प्रकार दिखाई देगी.

आउटपुट : 










कम्प्यूटर ऑनलाइन टेस्ट

कंप्यूटर हिंदी नोट्स

कंप्यूटर प्रेक्टिकल्स

Tags - What is HTML? History of HTML. Applications of HTML, Web Designing and HTML. How to use HTML for Web Designing. HTML Hindi Notes. Using HTML in Hindi. HTML Hindi Notes Heading Tags, Pargagraph Tags, HTML Practical Exercise - List and Table Tags Hindi Notes. How to Create HTML Ordered Lists & Unordered Lists. How to use Tables in HTML? Learn HTML in Hindi.
एच.टी.एम.एल. क्या है? एच.टी.एम.एल. का इतिहास, एच.टी.एम.एल. कैसे सीखे? एच.टी.एम.एल. हिंदी नोट्स, एच.टी.एम.एल. का उपयोग, एच.टी.एम.एल. का वेब डिजाइनिंग में क्या उपयोग है? एच.टी.एम.एल. में लिस्ट का क्या उपयोग है? एच.टी.एम.एल. में लिस्ट कैसे बनाएं?एच.टी.एम.एल. में टेबल क्या है? एच.टी.एम.एल. में टेबल कैसे बनाएं?




 

||    Theory    ||    Practicals    ||    Video Tutorials    ||    Online Test Series   ||