Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 7

    Uploaded by

    cool_554482192
    20 views10 pages
    PGDCA Unit 1 Subject Web Technology lecture 7

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    PGDCA Unit 1 Subject Web Technology lecture 7

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    20 views10 pages

    Lecture 7

    Uploaded by

    cool_554482192
    PGDCA Unit 1 Subject Web Technology lecture 7

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 10

    Unit 1 Lecture 7

    Imagemaps in html
    • इमेजमैप्स एक रोचक और महत्वपूर्ण HTML टै ग हैं जो वेब डेवलपमें ट में उपयोग ककया जाता है । इमेजमैप्स का उपयोग इमेज
    पर क्ललक करने पर ववभिन्न क्षेत्रों को भलिंक करने के भलए ककया जाता है , क्जससे उपयोगकताण को अन्य पेजों पर नेववगेट
    करने की सवु वधा भमलती है ।
    • इमेजमैप्स को इमेज के साथ <map> और <area> टै ग का उपयोग करके बनाया जाता है । <map> टै ग का उपयोग इमेज के
    ऊपर क्षेत्रों को पररिावित करने के भलए ककया जाता है , जबकक <area> टै ग का उपयोग उन क्षेत्रों को भलिंक करने के भलए
    ककया जाता है ।
    यहााँ एक उदाहरर् है :
    <!DOCTYPE html> • इस उदाहरर् में , हमने एक इमेज को भलए और उसके ऊपर
    <html> तीन क्षेत्रों को पररिावित ककया है , और प्रत्येक क्षेत्र को
    <head> अलग-अलग पेज के साथ भलिंक ककया है ।
    <title>Image Map Example</title> • इस तरह, जब उपयोगकताण इन क्षेत्रों में से ककसी को क्ललक
    </head> करता है , वह सिंबिंधधत पेज पर नेववगेट ककया जाता है ।
    <body>
    <h2>Click on the image areas to navigate:</h2>
    <img src="example.jpg" usemap="#map1" width="400" height="300">
    <map name="map1">
    <area shape="rect" coords="0,0,200,150" href="page1.html" alt="Page 1">
    <area shape="circle" coords="250,175,50" href="page2.html" alt="Page 2">
    <area shape="poly" coords="300,50,350,150,400,100" href="page3.html" alt="Page 3">
    </map>
    </body>
    </html>
    Frames:
    • फ्रेम्स HTML में एक महत्वपूर्ण टै ग हैं जो वेब पष्ृ ठों को वविाक्जत करने और एक से अधधक वेब पेज को एक ही वविंडो में
    प्रदभशणत करने की सवु वधा प्रदान करते हैं। फ्रेम्स का उपयोग वेबपेज को एक साथ कई िागों में बााँटने में मदद करता है ,
    क्जससे प्रयोलता एक ही पष्ृ ठ पर सिंग्रहहत जानकारी को आसानी से एक बार में दे ख सकता है ।
    • एक बुननयादी फ्रेम्स सिंरचना तीन मुख्य हहस्सों से भमलकर बनती है :
    • Frameset: यह टै ग उस स्थान को पररिावित करता है जहााँ हम वविाक्जत वविंडों को प्रदभशणत करना चाहते हैं।
    • Frame: यह टै ग वास्तववक वेब पष्ृ ठों को दशाणने के भलए उपयोग होता है । प्रत्येक फ्रेम अलग-अलग वेब पष्ृ ठ को लोड कर
    सकता है ।
    • NOFRAMES: यह टै ग उन ब्राउज़र उपयोगकताणओिं के भलए हदखाई जाती है जो फ्रेम्स का समथणन नहीिं करते हैं या क्जनके
    ब्राउज़र ने फ्रेम्स को डडसेबल ककया है ।
    <!DOCTYPE html>
    <html>
    <head>
    <title>Frames Example</title>
    </head>
    <frameset cols="25%,50%,25%">
    <frame src="frame1.html" name="left">
    <frame src="frame2.html" name="middle">
    <frame src="frame3.html" name="right">
    <noframes>
    <body>
    Your browser does not support frames.
    </body>
    </noframes>
    </frameset>
    </html>
    • इस उदाहरर् में , हमने तीन फ्रेम ननधाणररत ककए हैं, क्जनमें प्रत्येक फ्रेम के भलए अलग-अलग वेब पेज का URL ननहदण ष्ट
    ककया गया है । प्रत्येक फ्रेम को उनके नाम से पहचाना गया है ।
    • इसके अलावा, <noframes> टै ग का उपयोग फ्रेम्स का समथणन न करने वाले उपयोगकताणओिं के भलए एक सिंदेश प्रदान
    करने के भलए ककया गया है ।
    Tables:
    ताभलकाएाँ HTML में डेटा को सिंग्रहहत करने, प्रदभशणत करने, और सिंगहठत करने के भलए उपयोग की जाती हैं। वे डेटा को रो और
    कॉलमों की रूप में प्रदभशणत करती हैं क्जससे डेटा को सव्ु यवक्स्थत रूप से प्रस्तत
    ु ककया जा सकता है । यहााँ HTML में एक सरल
    ताभलका का उदाहरर् है :
    <!DOCTYPE html> </tr>
    <html> <tr>
    <head> <td>2</td>
    <title>Table Example</title> <td>सीमा</td>
    </head> <td>30</td>
    <body> </tr>
    <tr>
    <h2>नमस्ते! यह एक उदाहरर् ताभलका है :</h2> <td>3</td>
    <td>अभमत</td>
    <table border="1"> <td>28</td>
    <tr> </tr>
    <th>क्रमािंक</th> </table>
    <th>नाम</th>
    <th>आयु</th> </body>
    </tr> </html>
    <tr>
    <td>1</td>
    <td>राहुल</td>
    <td>25</td>
    • इस उदाहरर् में , हमने <table> टै ग का उपयोग करके एक ताभलका बनाया है ।
    • ताभलका में प्रत्येक पिंक्लत को <tr> टै ग द्वारा प्रनतननधधत ककया गया है और प्रत्येक स्तिंि को <th> टै ग या <td> टै ग के
    साथ प्रनतननधधत ककया गया है ।
    • <th> टै ग का उपयोग शीिणक के रूप में होता है जबकक <td> टै ग का उपयोग डेटा को प्रदभशणत करने के भलए होता है ।
    • उदाहरर् के ताभलका में , हमने तीन स्तिंि (क्रमािंक, नाम, और आयु) और तीन पिंक्लतयों (प्रत्येक पिंक्लत में एक व्यक्लत के डेटा)
    हदए हैं। यह एक सरल ताभलका है , लेककन HTML में ताभलकाओिं को और िी उन्नत बनाने के भलए ववभिन्न गर्
    ु ों का उपयोग
    ककया जा सकता है , जैसे कक कक्षाएाँ, सीमाएाँ, स्थानीय शैभलयााँ, आहद।
    DHTML
    DHTML, या Dynamic HTML, एक अद्यतन और इिंटरै क्लटव वेब पेज डडज़ाइन का प्रारूप है क्जसमें HTML, CSS, और
    JavaScript का सिंयोजन ककया जाता है ।
    DHTML का उपयोग करके, वेब डेवलपसण अपने पेजों को बनाने और प्रदभशणत करने के भलए ववभिन्न प्रिाव, एननमेशन, और
    इिंटरै क्लटवता जोड़ सकते हैं।
    यहााँ कुछ DHTML के मख्
    ु य ववशेिताएाँ हैं:

    • स्टाइल ग
    िं : DHTML के माध्यम से, डेवलपसण वेब पेजों को रूपािंतररत करने के भलए CSS (Cascading Style Sheets) का उपयोग कर
    सकते हैं। यह उन्हें पेज के रूप और लेआउट को बेहतर ढिं ग से ननयिंत्रत्रत करने की सुववधा दे ता है ।
    • इिंटरै क्टटव इ ेमेंट्स: DHTML के माध्यम से, डेवलपसण इिंटरै क्लटव इलेमेंट्स जोड़ सकते हैं, जैसे कक बटन, ड्रॉपडाउन मेन,ू और
    टै ब्स, जो प्रयोलताओिं को पेज पर सामग्री तक पहुिंचने में मदद करते हैं।
    • एनिमेशि: DHTML के उपयोग से, डेवलपसण पेज पर एननमेशन और पररदृश्यीकरर् जोड़ सकते हैं, जैसे कक आरक्षक्षत
    गनतववधधयााँ, फेड इन/फेड आउट इफेलट्स, और अन्य गनतववधधयााँ।
    • डाइिालमक किंटें ट: DHTML के माध्यम से, डेवलपसण पेज पर डाइनाभमक किंटें ट लोड कर सकते हैं जैसे कक डेटा के आधार पर
    सामग्री डाइनाभमक रूप से अपडेट करना।
    • ड्राग और ड्रॉप: DHTML के माध्यम से, डेवलपसण उपयोगकताणओिं को ड्रैग और ड्रॉप इिंटरफेस प्रदान कर सकते हैं, जो उन्हें
    सामग्री को वेब पेज पर सरलता से सिंग्रहहत करने में मदद करता है ।
    Creating Layers
    आप HTML में लेयसण बनाने के भलए <div> (डडवीजन) एभलमें ट का उपयोग कर सकते हैं, साथ ही CSS (कास्केडडिंग स्टाइल
    शीट्स) का उपयोग करके उन्हें स्टाइभलिंग और क्स्थनत दोनों कर सकते हैं।
    लेयसण आपके वेबपेज के अनि ु ाग होते हैं क्जन्हें आप एक-दस
    ू रे से स्वतिंत्रता से स्टाइल कर सकते हैं और स्थानािंतररत कर सकते
    हैं। ननम्नभलखखत है लेयसण बनाने का एक बुननयादी उदाहरर्:
    <!DOCTYPE html>
    <html lang="hi">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>लेयर उदाहरर्</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div id="layer1">
    यह लेयर 1 है
    </div>
    <div id="layer2">
    यह लेयर 2 है
    </div>
    </body>
    </html>
    (styles.css):
    • इस उदाहरर् में , हमारे पास दो <div> तत्व हैं जो दो लेयसण को
    #layer1 { प्रनतननधधत करते हैं। प्रत्येक लेयर का अपना ववभशष्ट आईडी
    width: 200px; (layer1 और layer2) है ।
    height: 100px; • हम CSS का उपयोग करके इन लेयरों को स्टाइल करते हैं, उनकी
    background-color: #ffcccc; आयाम, पष्ृ ठिूभम रिं ग, क्स्थनत ( position: absolute; का उपयोग
    position: absolute; करके) और स्टै ककिंग क्रम ( z-index का उपयोग करके) को ननयिंत्रत्रत
    top: 50px; करते हैं।
    left: 50px; • लेयसण का z-index ववभशष्टता क्रम ननयिंत्रत्रत करता है ; उच्च मानों
    z-index: 1; /* स्टै ककिंग क्रम को ननयिंत्रत्रत करता है */ को ननम्न मानों के ऊपर स्टै क ककया जाएगा।
    } • आप अपनी वेबपेज के भलए ववभशष्ट लेआउट और उसके लुक और
    फील को प्राप्त करने के भलए लेयरों की CSS गर् ु ों को समायोक्जत
    #layer2 { कर सकते हैं।
    width: 150px;
    height: 75px;
    background-color: #ccccff;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 2; /* उच्च z-इिंडल
    े स का मतलब है कक यह ननम्न z-इिंडल
    े स तत्वों के ऊपर क्स्थत होगा */
    }
    Thanks

    You might also like