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