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> |
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.
कंप्यूटर हिंदी नोट्स
कंप्यूटर प्रेक्टिकल्स
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 ||