Links and Images with Map

Summary

The script delves into the intricacies of HTML tags, focusing on link tags and image tags, emphasizing the importance of proper syntax and attributes. It discusses the evolution of website design, the use of anchor tags for navigation, and the significance of image optimization for web performance. The tutorial also touches on responsive images, the use of 'picture' tags, and the potential for interactive image maps, providing a comprehensive guide for enhancing web content with HTML.

Takeaways

• 😀 The video script is a Hindi tutorial focused on HTML tags, particularly 'a' (anchor) tags, and discusses their use in creating links within a webpage.
• 🔗 It explains the basic syntax of 'a' tags, including the use of 'href' attribute to define the link destination and 'target' attribute to control where the link opens.
• 📚 The script touches on the history of website development and how it has evolved, suggesting that future changes might occur.
• 🖼️ The tutorial also covers 'img' (image) tags, explaining how to properly use them to display images on a webpage, including the importance of image sources and alternative text.
• 🌐 It mentions the use of 'id' and 'class' attributes for CSS styling and JavaScript manipulation, emphasizing the importance of understanding these for advanced web design.
• 💻 The script provides a brief overview of HTML5 semantics, discussing the use of 'section' and 'article' tags to improve the structure and accessibility of web content.
• 📝 It highlights the importance of proper image optimization, mentioning the use of 'srcset' and 'sizes' attributes in 'img' tags for responsive images.
• 🛠️ The video script includes a discussion on the use of 'map' and 'area' tags for creating image maps, which allow clickable regions within an image.
• 📈 The tutorial suggests using online resources such as Shutterstock for high-quality images, acknowledging the cost and value associated with professional images.
• 📝 It also mentions the importance of image file names, recommending the use of single words or underscores to avoid issues with spaces in URLs.
• 🔑 The script briefly introduces the concept of 'picture' tags, which offer more control over responsive images and art direction on the web.

Q & A

What is the main topic discussed in the video script?

The main topic discussed in the video script is the continuation of the HTMEL series, focusing on HTML tags, specifically link tags, and some details about images and their usage on websites.

What does the acronym 'HTMEL' mentioned in the script refer to?

The acronym 'HTMEL' is a playful or misspelled version of 'HTML', which stands for HyperText Markup Language, the standard language for creating web pages.

What is the purpose of the 'a' tag in HTML as mentioned in the script?

The 'a' tag in HTML is used to create hyperlinks, which allow users to navigate from one page to another on the web.

What are some of the attributes of the 'a' tag discussed in the script?

The script discusses attributes of the 'a' tag such as 'href' for specifying the URL of the page the link goes to, 'id' for providing a unique identifier for the link, and 'class' for assigning CSS class to the link.

How does the script describe the process of creating a hyperlink in HTML?

The script describes creating a hyperlink by using the 'a' tag, opening it with the '<a>' notation, and then specifying the 'href' attribute with the desired URL, which can be opened in the same window or a new one using 'target' attribute.

What is the significance of the 'id' attribute in HTML elements as discussed in the script?

The 'id' attribute in HTML provides a unique identifier for an element, which is used for styling with CSS and scripting with JavaScript, allowing developers to target specific elements on a page.

How does the script explain the use of 'img' tag in HTML?

The script explains the 'img' tag as a simple way to embed images into a web page, requiring the 'src' attribute to specify the path to the image, and optionally the 'alt' attribute for alternative text if the image fails to load.

What are some of the image sources mentioned in the script for using images in HTML?

The script mentions using local images stored on the server and also suggests using free image sources from the internet, such as Unsplash, which provides high-quality images for free.

How does the script address the issue of image file names containing spaces?

The script suggests renaming image files to remove spaces, recommending single-word names or using underscores to avoid potential issues when the website is deployed on a server.

What is the importance of the 'alt' attribute in the 'img' tag as discussed in the script?

The 'alt' attribute in the 'img' tag is important as it provides alternative information for an image if it cannot be displayed, which is useful for accessibility and SEO purposes.

How does the script suggest handling the 'srcset' attribute for responsive images?

The script suggests using the 'srcset' attribute to provide different image sources for different screen resolutions or device capabilities, allowing the browser to choose the most appropriate image to load.

Outlines

00:00

😀 Introduction to HTML Tags and Website History

The speaker welcomes the audience back to a series on HTML, discussing the evolution of website creation and the use of HTML tags. They mention the importance of understanding the history of web development and delve into the specifics of image tags, emphasizing the need for proper knowledge to avoid unnecessary complexities in coding. An image named 'HTML code PNG' is introduced, highlighting its small size for faster loading, and the speaker guides through the process of creating a new file for simple link tags, explaining the syntax and usage.

05:01

📚 Deep Dive into Link Tags and HTML Structure

This paragraph explores the intricacies of link tags in HTML, explaining their syntax and how they function within the broader context of web design. The speaker discusses the use of anchor tags, their attributes, and the importance of proper syntax. They also touch on the evolution of frames in web design, moving from iframes to more modern techniques, and provide a detailed explanation of how to use target attributes in anchor tags for opening links in new tabs or windows, enhancing user experience and website usability.

10:03

🖼️ Understanding Image Tags and Their Attributes

The speaker provides an in-depth look at image tags in HTML, explaining their basic structure and attributes such as 'src', 'alt', 'width', and 'height'. They discuss the importance of using high-quality images and the legal considerations of copyright when sourcing images. The paragraph also covers the use of image maps for creating clickable areas within an image, allowing for interactive elements on a webpage. The speaker emphasizes the need for understanding the technical aspects of image loading and optimization for various screen sizes and devices.

15:04

🛠️ Practical Tips for HTML Image and Map Usage

This section offers practical advice on working with images and image maps in HTML. The speaker explains how to use the 'map' and 'area' tags to create clickable regions within an image, which can be used for navigation or interactive elements. They also discuss the importance of defining the correct paths for images and the potential issues that can arise from using spaces in image filenames. The paragraph concludes with a focus on the practical applications of these HTML features for creating engaging and user-friendly web content.

20:07

🎨 Advanced Techniques for Interactive Image Mapping

The speaker introduces advanced techniques for creating interactive image maps, discussing the use of JavaScript to enhance user interaction with images on a webpage. They provide a step-by-step guide on generating an image map and adding event listeners for clicks, which can trigger various actions based on the user's selection. The paragraph also touches on the importance of understanding the coordinates and areas of an image for precise mapping and the potential for creating dynamic and engaging user experiences with these HTML and JavaScript features.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard language for creating web pages and web applications. In the video, HTML is central to the discussion as the script delves into various HTML tags and attributes used for structuring and formatting web content. For example, the script mentions 'a' tag for hyperlinks and 'img' tag for images, illustrating the practical application of HTML in web development.

💡Link Tags

Link tags in HTML are used to define the relationships between the current document and an external resource. In the context of the video, link tags are discussed in relation to how they can be used to create hyperlinks and their significance in web navigation. The script specifically talks about the 'a' tag, which is used to create links to other pages or resources on the web.

💡Image Tags

Image tags in HTML are used to embed images into web pages. The video script discusses the 'img' tag, which is essential for displaying images. It mentions attributes like 'src' for the image source and 'alt' for alternative text, which are crucial for both functionality and accessibility on web pages.

💡Anchor Tags

Anchor tags, denoted by '<a>', are a type of link tag in HTML used to create hyperlinks. The video script explains how anchor tags can be used to link to different sections of a webpage or to external sites. It also touches on the use of 'href' attribute, which specifies the URL of the page the link goes to.

💡CSS

CSS, or Cascading Style Sheets, is used for describing the presentation of a document written in HTML or XML. The script mentions CSS in the context of styling web elements, such as setting background colors and text colors, to enhance the visual appearance of a webpage.

💡Attributes

In HTML, attributes provide additional information about elements. The video script refers to attributes in the context of HTML tags, explaining how they modify the behavior or appearance of the tags. For instance, the 'href' attribute in an anchor tag provides the destination URL for the link.

💡Web Development

Web development is the building and maintaining of websites. The video script is focused on various aspects of web development, including HTML coding for creating link tags and image tags, and CSS for styling. It provides insights into the process of designing and coding a user-friendly and visually appealing website.

💡Responsive Design

Responsive design ensures that web pages render well on different devices and screen sizes. The script touches on this concept when discussing the use of media queries in CSS to adapt the layout of a webpage based on the characteristics of the device being used to view it.

💡Image Optimization

Image optimization is the process of making images smaller in size without significantly losing quality, which is important for web performance. The video script mentions this concept when discussing the 'img' tag and the importance of using appropriate image dimensions and file formats for faster loading times.

💡Accessibility

Accessibility in web development refers to making websites usable for people with disabilities. The script briefly touches on this concept when discussing the 'alt' attribute in image tags, which provides a text alternative for users who cannot view the image, thus enhancing the accessibility of the web content.

💡Web Hosting

Web hosting is the service of providing storage space and access for websites. The script mentions web hosting in the context of uploading websites to a server, which is a necessary step in making a website accessible to the public on the internet.

Highlights

Introduction to the continuation of the HTML series focusing on link tags and images.

Explanation of the basic concept of the 'a' tag for creating hyperlinks and its common use with 'href' attribute.

Discussion on the history of website development and how it has evolved over time.

Details on the use of 'id' and 'class' attributes for styling and targeting HTML elements.

Demonstration of creating a new file for simple link tags and the process of opening it in a live server.

In-depth look at the syntax and usage of anchor tags, including the use of 'mailto:' for email links.

Tips on improving website usability with telephone links that automatically dial numbers.

Explanation of the importance of using the 'https' protocol for secure hyperlinks.

Guide on how to create image tags with 'img' for embedding pictures and the significance of 'src' attribute.

Highlighting the use of 'alt' text in image tags for accessibility and SEO purposes.

Introduction to the concept of image maps and how they can be used for interactive images.

Discussion on the importance of image optimization for web performance.

Practical advice on using free image resources for web development without copyright issues.

Tutorial on adjusting image size and layout using CSS properties like 'width' and 'height'.

Explanation of the difference between absolute and relative paths when linking to images.

Tips for handling spaces in image file names for better server performance.

Guide on creating clickable image maps with coordinates for interactive user experiences.

Introduction to the use of 'picture' tag for responsive images and its advantages.

Discussion on the importance of image file naming conventions for better organization and SEO.

Final thoughts on the power of HTML tags in creating interactive and accessible web content.

Transcripts

हान जी फिर से स्वागत है आप सभी का चाय और

कोर्ट में एचटीएमएल के सीरीज कंटिन्यू कर

रहे हैं इस वीडियो में हम जानेंगे थोड़ा

सा लिंक टैग्स के बारे में ए टैग्स के

बारे में और थोड़ा सा इमेजेस के बारे में

अब ए टाइप के साथ-साथ जानने के लिए मुझे

पता है आपने बहुत सारे लोगों को पता है की

ठीक है ए टैग होता है फ हम ऐड कर देते हैं

ज्यादा से ज्यादा उसके अंदर अंडरस्कोर

ब्लैक ऐड कर देते हैं बस इतना ही है लेकिन

इससे थोड़ा सा ज्यादा है थोड़ी सी आपको

हिस्ट्री के बारे में पता होना चाहिए की

किस तरह से वेबसाइट बनाई जाती थी अब किस

तरह से बनाई जा रही है और हो सकता है

फ्यूचर में भी और आगे चेंज आएं उसके बाद

हम जानेंगे थोड़ा सा इमेजेस के बारे में

ना की सिर्फ आईएमजी टैग के बारे में बट

पिक्चर टेक के बारे में थोड़ा सा और डिटेल

जानेंगे और देखेंगे की किस तरह से अगर

आपको एचटीएमएल की अच्छी इंडस नॉलेज है तो

कई बार आपको शायद कस की भी जरूरत ना पड़े

तो देखते हैं छोटा सा डिटेल इन डेथ

एनालिसिस और ऑफ कोर्स मैंने यहां पे एक

इमेज और ऐड कर दिया आपके लिए जिसका नाम है

एचटीएमएल कोड पीएनजी क्योंकि कुछ हम

डिटेल्स देखेंगे इसके साथ में आप कोई भी

इमेज उसे कर सकते हैं इमेज थोड़ी सी छोटी

है 400 / समथिंग की है तो तो इजीली लोड हो

जाती है इसलिए हम उसे कर रहे हैं बाकी सब

क्लोज कर देते हैं और सबसे पहले हम जानते

हैं एंकर टैग के बारे में थोड़ा सा उसका

डिटेल्स स्टडी करते हैं तो अभी हम क्या

करते हैं इसको भी क्लोज कर देते हैं और एक

नई फाइल बनाते हैं विच इसे गोइंग तू बी

सिंपली लिंक टैग्स लिंक टैग्स ठीक है जो

भी आपको नाम रखना है एचटीएमएल

एक्सक्लेमेटरी देयर सी गो और सिंपली हमारे

पास डॉक्यूमेंट यहां पे ए गया है तो

सिंपली बोलते हैं हम इसको लिंक टैग और

क्या करते हैं इसको सिंपली ओपन करते हैं

हम कमांड शिफ्ट पीस है लाइव सर्वर में

ताकि हमें राइट में डिटेल दिख जाए अब

क्योंकि हमें पता लग गया है की किस तरह से

हम थोड़ी सी कस लिख सकते हैं तो थोड़ी सी

कस की फैक्ट्स तो हम यहां पे कर ही लेते

हैं हमने स्टाइल टैग इंटर किया पुरी बॉडी

को टारगेट किया और उसके बाद बीजी से

बैकग्राउंड कलर लिया और हमने लिया यहां पे

414141 ताकि एटलिस्ट कुछ डार्क हो इतना

ज्यादा ब्राइट ना हो जो की आंखों को

परेशान करें इसी के साथ हम कलर्स भी ऐड कर

लेते हैं ताकि कलर्स भी हमें प्रॉब्लम ना

दे तो हमने यहां पे व्हाइट कलर ले लिया है

तो अब हमारे सारे टेक्स्ट होंगे व्हाइट

ठीक है ज्यादा कॉम्प्लिकेटेड नहीं करेंगे

एंकर टैग को सिंपली हम क्या करेंगे की

एंकर टैग्स के बारे में पढ़ना शुरू करते

हैं एंकर टैग्स का जो सिंटेक्स है बहुत ही

सिंपल है सबसे पहले आप ए लिखिए और यहां पे

कॉलम लिखिए अब आपको डिटेल पता लगेगी की

आपके पास ब्लैक टैग्स ए सकते हैं लिंक

टैग्स ए सकते हैं मेल हो सकता है और

टेलीफोन हो सकता है ये जो टेलीफोन है ये

ज्यादातर कम करता है जब कोई भी आपकी

वेबसाइट ब्राउज़र में ओपन करता है जैसे आप

तप करते हैं वहां पे जहां पे लिंक्ड है तो

ऑटोमेटेकली ब्राउज़र आपके एपीआई को कॉल

करता है जो की कीपैड के प्राइस है और

ऑटोमेटेकली वो नंबर आपके मोबाइल पे ए जाता

है और आप इजीली फोन कर सकते हैं तो थोड़ा

सा यूएसएबिलिटी बढ़ती है वेबसाइट की इसी

तरह से मेल टैग भी है अगर आप यहां पे मेल

तू लिख के इंटर करते हैं यहां पे तो जिस

भी आईडी पे आप मेल कर रहे हैं आपका

ब्राउज़र का डिफॉल्ट मेल क्लाइंट ओपन होगा

और आपका तू वहां पे ऑटोमेटेकली फिल हो

जाएगा और आप मेल लिख सकते हैं तो थोड़ी सी

सहूलियत यहां पे मिलती है इसी तरह से आप

देखेंगे की जैसे मैं कॉलर लिखता हूं यहां

पे एक लिंक भी है ये कुछ खास स्पेशल नहीं

है ये सिंपली एक शॉर्टकट है एडमिट का

क्योंकि उनको पता है बहुत लोग डायरेक्टली

गूगल लिख देते हैं और यहां पर गूगल लिख

देते हैं लेकिन प्रॉब्लम क्या है ठीक है

यहां पे गूगल ए गया जो की देखने में बहुत

प्रॉब्लम हो रही है बहुत सारे लोग क्या

करते हैं की सिंपली लिख देते हैं

google.com और एचटीटीपी लगाना भूल जाते

हैं अगर वो ऐसा करते हैं तो ये लिंक कहीं

पे भी नहीं जाता है आप क्लिक करेंगे नोटिस

करिए यहां पे नहीं जा सकते हैं कैन नॉट

गेट गूगल लेकिन जब आप यहां पे जाते हैं और

एचटीटीपी एचटीटीपी एस लगाते हैं से करते

हैं वापस से तो हम इसको ओपन करते हैं वापस

से

कमेंट शिफ्ट पी और लाइव सर्वर पे ओपन करते

हैं तो अब जब मैं यहां पे गूगल पे क्लिक

करता हूं तो ये गूगल पे मेरे को

रीडायरेक्ट करता है क्योंकि ये ब्राउज़र

इन डिफॉल्ट है तो यहां पे इसका

एक्सप्लेनेशन इतना अच्छा नहीं आएगा तो इसी

के लिए हम क्या करेंगे राइट क्लिक करके और

ओपन विद लाइव सर्वर करेंगे तो लाइक सर्वर

में मैं इसको ओपन करता हूं बहुत ही बहुत

ही डिफिकल्ट है इसको पहचान पाना क्लिक

करता हूं तो ऑटोमेटेकली मुझे गूगल पर ले

जाता है तो यह सिक्स की बात अब इसके अंदर

आपको एक टैग मिलेगा जिसके बारे में हम

थोड़ा सा स्टैक ओवरफ्लो पे पढ़ेंगे वो भी

होगा और टारगेट तो जैसे आप टारगेट लिखते

हैं और उसके बाद लिखते हैं तो आपको यहां

पे कुछ ऑप्शंस मिलते हैं

सेल्फ टॉप आपने देखा होगा या तो कोई ऑप्शन

नहीं भरा जाता है या फिर ब्लैक ऑप्शन भरा

जाता है जब भी आप ब्लैक ऑप्शन लिखते हैं

से करते हैं वापस से ए जाते हैं तो नोटिस

करेंगे इस बार हमारा जितना भी टैग जितना

भी टैग है वो सब एक नए तब के अंदर ओपन

होता है बट प्रॉब्लम पता है कहां पे आता

है प्रॉब्लम वहां आता है जब कोई लोग पूछते

हैं की और बाकी टैक्स करते क्या है

एक्चुअली में जैसे आप यहां पर सु लेंगे

पैरेंट और सेल्फ क्या है यह टॉप के अंदर

डिफरेंस क्या है यह डिफरेंस आपको नहीं पता

लग सकता क्योंकि अभी हम जिस स्टाइल में

कोड करते हैं वहां पे हमारे आई फ्रेम्स और

जो फ्रेम डाटा है उनका यूसेज ऑलमोस्ट ना

के बराबर है मैं आपको एक स्टैक ओवरफ्लो का

आर्टिकल पटना चाहूंगा यहां पे बिकॉज मुझे

पता है आप डॉक्यूमेंटेशन ज्यादा नहीं

पढ़ते हैं बट थोड़ा सा डॉक्यूमेंटेशन आपकी

और नॉलेज को इंक्रीज कर देगा तो यहां पे

एक बहुत ही अच्छा आर्टिकल लिखा हुआ है

जिसके अंदर पूरा डिटेल में बताया हुआ है

की किस तरह से होता है अब यहां पे आप

देखेंगे ये खुद भी का रहे हैं विच व्हाट

इस कन्ज्यूरिंग इस डेट अन बिकॉज जनरली

डोंट अन पीपल डोंट राइट फ्रेम्स अन्य मोर

तो ये जो फ्रेम है आई फ्रेम है फ्रेम सेट

है इनके थ्रू पुरी वेबसाइट डिजाइन होती थी

आप क्लिक करते द कुछ डाटा आपके इसी फ्रेम

में लोड हो जाता था कुछ ही डाटा नए फ्रेम

में लोड होता था तो वहां पे आपके जो

एलिमेंट्स है पेरेंट्स टॉप ये सब वहां पे

कम आते द अभी क्या बच गया सिर्फ एक सेल्फ

टैग तो ये बहुत ही अच्छा आर्टिकल है जिसके

अंदर पूरा डिटेल से बताया गया है की किस

तरह से हम पूरा लिखते द पहले क्या एक

फ्रेम है फ्रेम के अंदर फ्रेम के अंदर भी

फ्रेम गर्म होता है इस तरह से तो मैं क्या

करता हूं इस सारे डिटेल का आर्टिकल का

लिंक आपको देता हूं ताकि आप इसको बाद में

पढ़ सकें तो हम यहां पर उसे करेंगे वापस

से सिंपली टाइप का इस बार मैं आपको एक

ब्लैक में नया टेक देता हूं इतनी सारी

डिटेल तो नहीं लिखते हैं सिंपली आते का

उसे करते हैं यहां पे और

लिंक तू रीड

और यहां पर मैं आपको डिटेल दे देता हूं

इसका सिंपली लिंक

और यहां पर हमने पेस्ट कर दिया अब इसको हम

क्या करेंगे वर्ड रैप ताकि हम अच्छे से

इसको देख पाए अब आपके पास आर्टिकल के

साथ-साथ सिंपली यह पेज जहां पर आपको जा के

छोटा सा आर्टिकल पढ़ना है जो की लिंक है

ठीक है तो इतना तो हो गया हमारे पास ये

बेसिक और ये भी हमने जान लिया की ठीक है

अभी हम अंडरस्कोर ब्लैक या फिर कुछ भी

नहीं उसे करते हैं और भी हमारे अटरीब्यूट

थोड़े बहुत हो सकते हैं जिनको हम बाद में

पढ़ेंगे की किस तरह से हो सकता है और एक

सबसे इंपॉर्टेंट बात ये की अभी हम देख रहे

हैं की हमने डायरेक्ट लिखा है बट ऐसा नहीं

है आप चाहे तो इसको किसी के अंदर रैप अप

भी कर सकते हैं जैसे फॉर एग्जांपल हमने

ऑलरेडी देखा है की आप इस पूरे को हम इसको

कट करते हैं और आप चाहे तो इसको h2 के

अंदर भी रैप अप कर सकते हैं

ऑटोमेटेकली ब्राउज़र देता है लिंग की

लेकिन हम इसको भी चेंज कर सकते हैं अपने

कस से जो की हम कस सेक्शन में जानेंगे तो

ये तो रही सिंपल सी बात बेसिक्स की अब

सिर्फ इतना ही नहीं है आप इसको और इमेजेस

टैग्स और उनके थ्रू भी आप मॉडिफाई कर सकते

हैं जो की बहुत इजी है बट जब भी आप लिंक

क्रिएट करते हैं तो एक और मैं आपको पता

होनी चाहिए की हम एक और टॉपिक पढ़ेंगे आने

वाले टाइम में आईडी और क्लासेस आप बहुत

कुछ टारगेट कर सकते हैं इस एंकर टैग से एक

से पेज पर भी जैसे की फॉर एग्जांपल मैं

क्या करता हूं यहां पे हमने एक ए टैग यहां

पे लिख रखा है ठीक है अब उसके बाद में

यहां पे पैराग्राफ एक ऐड करता हूं जिसके

अंदर लॉरेन वर्ड हम डालते हैं 400 काफी

सारे शब्द हैं से किया और देखा पेज के

अंदर काफी शब्द हैं अब मैं क्या करता हूं

मुझे और भी कुछ लिखना है सपोस करिए एक और

पैराग्राफ ऐड करना है जिसके अंदर लॉरेन है

इस बार 200 शब्द

से किया और देखा काफी कुछ है इस बार थोड़ा

सा और स्क्रोलिंग हमें चाहिए तो बेयर विद

मी थोड़ा सा और हम देखेंगे वापस से लॉरेन

लेते हैं और 300 शब्द और ऐड कर देते हैं

अब हमारा पेज थोड़ा सा स्क्रॉल करने लग

यहां पे लिंक रखूं और लिंक को रखते ही

ऑटोमेटेकली इस पेज पर या फिर इस लोरेन पे

कहीं पे भी पहुंच जाऊं तो उसको करने के

लिए बहुत आसान कम है आप क्या कर सकते हैं

की अगर आपको और अच्छे से देखना है इसको और

स्क्रोलिंग को देखना है तो हम चाहें तो एक

और पैराग्राफ टैग ऐड कर सकते हैं

पैराग्राफ और जिसके अंदर हमारे पास ए गया

लॉरेन और वापस से 300 शब्द ऐड कर देते हैं

आपने देखा सिर्फ अमित की वजह से हम कितनी

फास्ट अपने एग्जांपल्स बना पाए की अभी

हमारे पास स्क्रिबल डाटा है इजीली तो अभी

मैं चाहता हूं की यहां पे एक बटन हो

फर्स्ट फर्स्ट ऑफ ऑल हम बटन यहां पे ऐड कर

लेते हैं और इन पैराग्राफ को मैं क्या

करूंगा श्रिंक कर दूंगा ताकि मुझे कोड

देखने में इतनी दिक्कत ना हो तो मैं क्या

करता हूं इसको

श्रिंक इंटेंशन अभी तो नहीं ए रहा है बट

देखते हैं आगे और तो मैं यहां पे एक बटन

ऐड करता हूं सिंपली आते कर देता हूं और इस

ए टाइप का नाम होगा

स्क्रैप अभी यह टैग कहीं पर भी नहीं जा

रहा पर आप क्या कर सकते हैं यहां पर लिख

सकते हैं हैशटैग जो की आईडी का शॉर्ट

फॉर्म होता है और जो भी आपको नाम देना है

जैसे की आपको नाम देना है इसका सेक्शन है

कोई सो आपने नाम दिया सेक्शन 2 सेक्शन 2

पे आपको जाना है अभी जब आप इसको से करके

जाएंगे तो अभी आप इस स्क्रॉल के थ्रू कुछ

भी नहीं कर सकते क्योंकि कोई आईडी है ही

नहीं जिसका सेक्शन तू है वहां पे तो आपको

क्या करना है सिंपली यहां पे एक सेक्शन तू

डिज़ाइन करना है तो सेक्शन तू सपोर्ट करिए

मैं इस लास्ट वाले पैराग्राफ को या सेकंड

लास्ट पैराग्राफ को सेक्शन तू बोल देता

हूं जिस भी पैराग्राफ को आप चाहे आपको कुछ

नहीं करना उसे पे सिर्फ एक आईडी देना है

जिसका नाम होगा सेक्शन 2 अब जितने भी आईडी

है उनको हमारा एंकर टैग रेफरेंस कर सकता

है यहां पे तो आईडी इससे दिनो होता है और

सेक्शन 2 हमने उसको नाम दिया है तो यह

हमारे पास ए गया अभी मैं से करता हूं अब

यहां पर मैं स्क्रॉल पे जाता हूं तो

ऑटोमेटेकली में सेक्शन 2 पे ए गया हूं जो

की पेज का टॉप हो गया ऑटोमेटेकली और बहुत

सारे इस तरह के प्लगइन आते हैं जिससे ये

स्मूथ स्मूथली स्क्रॉल करें और बहुत सारे

कम हम कर सकते हैं बट अभी इतना समझ

कितना पावरफुल हो सकता है थोड़ी सी

हिस्ट्री padhiyega तो ये तो हो गया हमारा

बेसिक लिंक टैग अब मैंने चाहता की इन

वीडियो को मैं हजार वीडियो में डिवाइड

करूं इसलिए थोड़ा सा इंडसॉफ्ट में जाऊंगा

इमेजेस के बारे में भी इमेजेस जो है वो

काफी आसान है इतना ज्यादा कॉम्प्लिकेटेड

नहीं है बट उसके बारे में लोग पढ़ते कम

हैं इसलिए थोड़ा सा परिसर हो जाता है

एक्सक्लेमेटरी तब ये तो मुझे पता है आप

सभी को बहुत आसानी से ए गया है अब इमेजेस

के बारे में जानते हैं तो सबसे पहले इमेज

टैग तो आप जैसे लिखेंगे आईएमजी यह शॉर्टकट

है एडमिट का आप देख सकते हैं कितने तरह के

इमेजेस हमारे पास हैं तरह की नहीं यह

अटरीब्यूट्स हैं उनके सिंपली सोर्स इमेज

वाला उसके बाद साइज के साथ सोर्स सेट के

साथ और उसके बाद हमारे पास है जी इंडेक्स

के साथ तो ये सारा हम बाद में देखेंगे

पहले बेसिक इमेज देखते हैं कैसे होती है

सिंपली आपको एक सोर्स बताना है और उसके

बाद एक और टेक्स्ट बताना है अब ऑल टेक्स्ट

क्यों बताना है क्योंकि अगर इमेजेस लोड ही

नहीं हुई तो

नो इमेज से करते हैं राइट क्लिक और ओपन

विद लाइव सर्वर तो

जैसे हम यहां पर जाते हैं लाइव सर्वर तो

कॉपी यह मेरी दूसरी स्क्रीन पर ओपन हो रहा

है

अभी इमेजेस ऐसा नहीं है की आप सिंपली गूगल

पर जाएं और कोई भी इमेज यहां पे ऐड कर दें

कोई भी इमेज ऐड करेंगे तो कॉपीराइट क्लेम

आएगा आप कर सकते हैं चाहे तो जैसे आपको

पसंद है कोई कोड वाली इमेज कोड लैपटॉप या

ऐसा कुछ तो आप देखेंगे इमेजेस आपको

क्वालिटी की भी नहीं मिल रही है और इनमें

से कोई भी इमेज उसे करने का मतलब है अच्छा

खास नहीं होता आएगा आपके पास कॉपीराइट्स

का तो इमेजेस कौन सी फ्रीली उसे करने के

लिए है कौन सी नई इमेजेस एक बहुत बड़ा

मल्टी मिलियन डॉलर मार्केट है आप देखेंगे

बहुत सारी वेबसाइट से जैसे शटरस्टॉक एक-एक

इमेज 300 डॉलर 500 डॉलर का आता है आप

ट्यूटोरियल फ्री में सिख रहे हैं इसका

मतलब ये नहीं की हर चीज फ्री में मिलती है

इमेजेस बहुत बड़ा मार्केट है और हर एक

इमेज की वैल्यू है 300 डॉलर्स लेकिन ऐसा

नहीं है की सब कुछ पेड़ है कुछ लोग हैं जो

की अभी भी फ्री में इमेजेस देते हैं जैसे

की अनफ़्लैश एक वेबसाइट है

है जहां पर जाकर आप हाई क्वालिटी इमेजेस

फ्री में उसे कर सकते हैं कमर्शियल पर्पस

के लिए भी कर सकते हैं तो यहां पर जितने

भी इमेजेस हैं आप जो चाहे उसे कर सकते हैं

कोई क्रेडिट देने की भी जरूरत नहीं है बट

देंगे तो अच्छा होगा इसके अलावा एक और

वेबसाइट है जो की है पिक्सल्स

पिक्सल्स में मेरा अकाउंट भी है तो आप

चाहे तो वहां पे भी बहुत सारे लोग हैं जो

की फ्री में अपनी इमेजेस उसे करने देते

हैं और कोई बुरा नहीं मानता है आप जो चाहे

इमेजेस उसे कर सकते हैं आपको जो भी इमेज

अच्छी लगती है आप उसको उसे कर सकते हैं

क्रेडिट देने की भी जरूरत नहीं है पर

देंगे तो अच्छा होगा जैसे सपोज करिए मैं

ये उसे करता हूं इमेज शायद जापान की इमेज

है तो मैं राइट क्लिक करूंगा और नोटिस

करिए ध्यान से आपको कॉपी इमेज नहीं करना

है आपको कॉपी इमेज एड्रेस करना है क्योंकि

इस कॉपी इमेज एड्रेस से एक्चुअली में आपका

इमेज आता है जो की आप पूरा लोड कर सकते

हैं अब जैसे मैं इस इमेज को लोड करता हूं

यहां पे सोर्स के अंदर ये तो एक तरीका हुआ

की किस तरह से इमेजेस को लोड किया जा सकता

है अभी मैं से करता हूं यहां पे बैक जाता

हूं अपने डॉक्यूमेंट के अंदर ये बहुत सारी

बहुत बड़ी इमेज हो गई है तो इमेजेस के तब

हमेशा देखेंगे की एक प्रॉपर्टी दो

प्रॉपर्टी एक्चुअली में हमेशा उसे होती है

विथ और हाइट ज्यादातर लोग सिर्फ विथ उसे

करते हैं जैसे मैंने उसे कर 100 पिक्सल्स

तो अभी ये इमेज छोटा हो गया 100 पिक्सल का

और क्योंकि ये व्हाइट है tapasar नहीं ए

रहा तो हम वापस से वही कम करेंगे स्टाइल

में जाएंगे बॉडी को टारगेट करेंगे और

लिखेंगे बिजी सी अच्छी प्रैक्टिस भी हो

जाएगी और आपको कलर पता ही है 414141 एक

शेड ऑफ ग्रे तो बटोर है तो ऐसा नहीं है की

आपकी इमेज 100 पिक्सल्स की आप चाहे तो 400

पिक्सल की भी इमेज उसे कर सकते हैं और अभी

थोड़ा बटोर है और भी बहुत कुछ कर सकते हैं

आप कस के साथ बट ये प्रॉपर्टीज तो कॉमन है

विथ और हाइट ज्यादातर से कम हो जाता है बट

आप चाहे तो हाइट भी दे सकते हैं बट

प्रॉब्लम कई बार ये होता है की हाइट और

वेट का अगर आपको रेश्यो नहीं पता तो

इमेजेस स्ट्रेच हो जाती है या खराब दिखने

लगती है तो ये ना करें प्लीज ओके तो ये तो

हो गया हमारा बेसिक इमेजेस ये इस तरह से

इमेजेस हमारे पास लोड हो सकती है अगर

इमेजेस हमारे पास लोकली राखी हो तो क्या

करें कुछ नहीं इसको डुप्लीकेट करिए और

डुप्लीकेट करने के लिए शिफ्ट ऑप्शन की

आल्ट की जिसको विंडोज में बोलते हैं और

डाउन ऐरो तो यह कोड हमारे पास डुप्लीकेट

हो गया यह शॉर्टकट्स की प्रैक्टिस करते

रहिए प्लीज क्योंकि ये शॉर्टकट जब आप आगे

जाएंगे रिएक्ट एंगुलर में फर्स्ट स्पेस

कोड लिखेंगे तब इस तरह से मैं फटाफट लाइंस

की कॉपीज बनाता जाऊंगा और एडिट करता

जाऊंगा आप पीछे ना रह जाए उसमें तो अभी हम

इमेजेस को लोड करेंगे हमारे लोकल रिसर्च

से तो इमेजेस के अंदर होता है एब्सलूट पथ

और रिलेटिव पथ ये हम कस में और जानेंगे

अभी सबसे आसान तरीका आपको बताता हूं आप

क्या करिए लिखिए डॉट स्लैश डॉट स्लैश का

मतलब है करंट फोल्डर अगर एक फोल्डर पीछे

जाना हो तो डॉट डॉट स्लैश लिख दीजिए अगर

एक फोल्डर आगे जाना हो तो उसे फोल्डर का

नाम लिख दीजिए सबसे आसान तरीका है तो यहां

पर हम क्या करते हैं डॉट स्लैश के अंदर

हमारे पास एक इमेज राखी हुई है जिसका नाम

है यहां पे एचटीएमएल

तो एचटीएमएल कोर इमेज अब इस इमेज के साथ

एक प्रॉब्लम है इस इमेज के अंदर है स्पेस

और स्पेस सबसे बेकार चीज अगर आप अपने

वेबसाइट को सर्वर पर लेकर जा रहे हैं यहां

पे यह कम करेगा लेकिन जैसे आप सर्वर पे

जाएंगे ये आपको बहुत प्रॉब्लम देगा तो

बेस्ट कम यह रहेगा की आपकी जितनी भी

इमेजेस है उनको आप रिनेम करिए या तो सिंगल

वर्ड नाम या फिर उनके बीच हो या अंडरस्कोर

हो तो मैं यहां पे इमेज एचटीएमएल कोर से

मैच रखता हूं और वैसी बात है आप मुझे

इमेजेस का नाम दोबारा से देना पड़ेगा और

मैं यहां पर लिख देता हूं एचटीएमएल

course.png फरक कुछ नहीं है बट ये

छोटे-छोटे चीज आपकी वेबसाइट जब प्रोडक्शन

में जाती है तो वो सही से कम करेगी या

नहीं करेगी उसपे डिपेंड करता है तो बहुत

ही बेसिक था इमेजेस के अंदर एस सच कोई

परिसर है नहीं अभी तक बट इमेजेस के अंदर

थोड़ा सा और डिटेल में आपको बताता हूं

यहां पे की इमेजेस और क्या-क्या कर सकती

है आपके लिए इमेजेस के अंदर कई एग्जांपल्स

होते हैं कई सिंटेक्स होते हैं एक छोटा सा

सिंटेक्स मैं आपको यहां पर बताना चाहूंगा

एक और आपने एलिमेंट देखा होगा जो की इमेज

नहीं जिसको हम बोलते हैं पिक्चर

है अब इमेजेस जब हमारे पास है तो पिक्चर

का उसे करने की जरूरत क्या है क्योंकि जब

आप पिक्चर टैग उसे करते हैं तब आपको सोर्स

टैग भी उसे करना पड़ता है रिसोर्स के

मीडिया देखिए मीडिया मीडिया साइज साइज

टाइप्स बहुत सारा है यहां पे तो हम उसे

करते हैं सोर्स अब सोर्स आपने उसे कर है

सोर्स एक सेल्फ क्लोजिंग एलिमेंट है तो आप

चाहे तो इस तरह से भी लिख सकते हैं से

करके बाग जाता हूं कुछ भी नहीं है तो

सोर्स के अंदर हम वैल्यूज कैसे ऐड करते

हैं तो सोर्स के अंदर जाकर आप सबसे पहले

देखते हैं एसआरसी सेट जैसे आपने सर से सेट

लिखा तो वापस से आप इमेजेस को लोड करिए तो

मैं यहां पे लोड करना चाहता हूं इस से

एचटीएमएल मैच को आप यहां पर थोड़ा सा मैं

आपको डिटेल एंड डेथ देता हूं

तो यह हमने लिखा

से कर और देखा कुछ भी ऐड नहीं हो रहा है

तो कहां गई क्या जरूरत है मैं इस इमेजेस

और इस पिक्चर को उसे करने

तब आपको सोर्स उसे करना होता है इसके

साथ-साथ एक और भी आपको उसे करना होता है

वो किया आईएमटी टैग जब आप आईएमसी टैग उसे

करते हैं तो आप से लिख सकते हैं यहां पे

और ऑल टैग भी लिख सकते हैं तो अभी हम से

करके जाते हैं ठीक है अभी एक और इमेज

हमारे पास ए गई है कुछ देर के लिए हम इस

इमेज के अंदर टाइपिंग मिस्टेक कर देते हैं

ताकि ये लोड ना हो और हम यहां पर नो इमेज

देख पाए ठीक है तो अगर हमको पता था पिक्चर

टैग के अंदर आईएमजी ही उसे करना है तो

इसको बाहर ही उसे क्यों नहीं कर लिया ये

यहां पे सोर्स लगाना ही क्या जरूरत थी

जरूरत है बहुत सारी वेबसाइट का आपके पास

प्रोग्राम इस तरह से आता है या फिर कम इस

तरह से आता है जहां पे आपको मल्टीपल

इमेजेस लोड करनी होती है डिपेंड्स अगर कोई

मोबाइल पर ओपन कर रहा है या फिर कोई बड़ी

स्क्रीन पर ओपन कर रहा है डेस्कटॉप पर ओपन

कर रहा है तो यहां पे बहुत सारे लोग क्या

करते हैं की जावास्क्रिप्ट से पहले

डिटेक्ट करते हैं की कौन सी मोबाइल में

ओपन कर रहा है कौन से ब्राउज़र में ओपन कर

रहा है बट आप ये कम कस और एचटीएमएल से कर

सकते हैं जैसे हमने यहां पर सोर्स लिखा

उसके साथ आप यहां पर अटरीब्यूट लिख सकते

हैं जो की होता है मीडिया इस मीडिया के

अंदर आपको कुछ नहीं करना है सिर्फ यह

लिखना है की आपकी मीडिया प्रॉपर्टी क्या

है इसके बारे में हम कस में और इंडिप्थ

डिटेल में पढ़ेंगे बट एक एग्जांपल बताना

चाहूंगा जैसे हमने यहां पे लिख दिया मैन

विथ

लिख दिया हमने जैसे सपोर्ट करिए 650

पिक्सल्स या और भी कुछ लिख सकते द आप यहां

पे जो भी आपको पिक्सल की वेट चाहिए तो जब

ये विथ होगी तब ये वाली इमेज लोड होगी

इसको आप डुप्लीकेट कर सकते हैं शॉर्टकट

ज्यादा डुप्लीकेट का शिफ्ट ऑप्शन और डाउन

ऐरो की अब आपने यहां पे लिख दिया सपोस

करिए 460 पिक्सल्स

है तो यहां पर मैं यह वाली इमेज लोड

करवाने की जगह कोई सपोर्ट तू इमेज है वह

लोड करवाना चाहता हूं तो अब क्या होगा

ऑटोमेटेकली जैसे आपका ब्राउज़र श्रिंक

होगा बेस्ड उसे पर आपकी इमेजेस लोड होगी

की कहां पे मुझे कौन सी इमेज चाहिए यहां

पे मेरे पास इमेज नहीं है तो वो लोड नहीं

हो रही है यहां पे इमेज है तो वो लोड हो

रही है तो डिपेंड्स आप क्या करना चाहते

हैं उसके बेसिस पे आप सिर्फ ये सोर्स और

सोर्स सेट को उसे करते हुए कम ले सकते हैं

जब ये सब रन नहीं करेगा तो बाय डिफॉल्ट

आपकी इमेज ये रन करेगी तो ये सिंपल सा एक

डिफरेंस होता है जब एक्चुअली मैं जा के उन

सबको पढ़ते हैं तो अभी आपको पता ही हम

क्या करने वाले हैं जाके हम सिंपली जाने

वाले हैं गूगल पे पिक्चर एचटीएमएल और

एमडीएम इसके बारे में जाके हम थोड़ा सा और

रिसर्च और स्टडी करेंगे की एक्चुअली में

पिक्चर टैग क्यों उसे होता है यहां पे

हमारे पास मल्टीपल सोर्सेस क्या है इसका

हम ट्री इट यूजर्स नोट्स में हम इसके

थोड़े से पढ़ सकते हैं की क्या इसको हम

किस तरह से ऑब्जेक्ट पोजीशन और कहां का

उसे कर सकते हैं obbvious सी बात है

अटरीब्यूट तो हमें पढ़ने नहीं है और उसके

बाद एग्जांपल्स भी हमें देखने की किस तरह

से एग्जांपल्स यहां पे हम लिख और उसे कर

सकते हैं अटरीब्यूट इस अटरीब्यूट्स के

थ्रू बहुत सारे प्लगइन हैं जो की लाखों

लाखों डॉलर साल के कम रहे हैं सिर्फ और

सिर्फ एस अटरीब्यूट को मैंने प्लेट करके

इसी से वेबसाइट के इमेजेस को ऑप्टिमाइज़

करते हैं तो ये तो हुई बात अब बेसिक

इमेजेस की अब मानता हूं वीडियो थोड़ा सा

बड़ा है बट आई थिंक इंटरेस्टिंग भी है अब

एक छोटी सी चीज आपको मैं और बताना चाहता

हूं क्योंकि इमेजेस इतनी ज्यादा पावरफुल

होती है

इमेजेस के अंदर आपने कई बार देखा होगा की

जैसे इंस्टाग्राम पे या सबसे पहले फेसबुक

में आपने देखा होगा की इमेजेस के अंदर आप

फेस के मास्क बना सकते हैं जैसे आप

सिलेक्ट कर सकते हैं की मेरा फ्रेंड कहां

पे है तो आपको मैं डिटेल यहां पर थोड़ी सी

बताता हूं अभी यहां पे तो हम क्या करेंगे

सबसे पहले हमें बनाना है एक शॉप तो हम

जाते हैं सबसे पहले गूगल के ऊपर और एक

छोटा सा क्वेरी हम सर्च करेंगे यहां पे

इमेज

मैप जेनरेटर बहुत सारी ऐसी वेबसाइट से जो

इमेजेस के मैप जेनरेट कर सकती है मैं

जेनरेट करूंगा एक इमेज जो मेरे पास ऑलरेडी

है

यह वाली इमेज मैंने सिलेक्ट कारी ओपन कारी

और यह रहा हमारे पास मैप अब आप चाहे बहुत

सारे मैप्स बना सकते हैं जैसे सपोस करिए

मैं बनाता हूं यहां पे क्लिक करके और यहां

पे क्लिक करके तो ये हो गया मेरा एक मैप

अब इसके साथ में एक और एरिया ऐड करता हूं

वहां पे भी मुझे बनाना है आप चाहे तो

रेक्टेंगल सर्कल जैसा भी वेबसाइट ऑफर करें

या आप खुद भी बना सकते हैं एक रेक्टेंगल

मैं यहां पे ऐड करता हूं की कोई एचटीएमएल

पे क्लिक कर रहा है तो उसके लिए तो ये हो

गया हमारे पास एचटीएमएल का मैप अब जैसे आप

यहां पे शो कोड करेंगे तो इस कोड का

एग्जांपल देने के लिए मुझे एक्चुअली में

थोड़ी सी जावा स्क्रिप्ट नहीं padiyegi

चिंता मत करिए ज्यादा नहीं लिखनी पड़ेगी

बस आपको समझने के लिए लिखनी पड़ेगी तो मैं

यहां पे कॉपी करता हूं इस कोड को वापस

अपने कोड एडिटर पर जाता हूं और सबसे पहले

तो यहां पे कमेंट लिखता हूं

है जो की होगा इमेज मैप जेनरेटर इसको

कमेंट कर देते हैं और आते हैं यहां पर अब

मैंने इसको यहां पर पेस्ट कर दिया

एचटीएमएल इमेज ठीक है लेकिन हमें क्या

करना है हमें लोड करवानी है हमारी खुद की

इमेज तो जैसे मैं इसको से करता हूं और

जाता हूं हमारे डॉक्यूमेंट पर देखिए ये

इमेज लोड हो गई है अभी के लिए कुछ टाइम के

लिए मैं क्या करूंगा सिर्फ इनके अंदर एक

वापस से मिस्टेक कर दूंगा ताकि ये इमेजेस

भी ना लोड हो और यहां पे इसको से करते हैं

एक और जगह कहीं मैं इमेज लोड कर रहा हूं

देखते हैं कहां पे यहां पे एचटीएमएल कोर

ठीक है इसको भी नहीं लोड करना है और देखिए

तो अभी हमारे पास सिंपली एक इमेज है जो की

हमें पता है इस पार्टिकुलर कोड सेक्शन से

ए रही है पर फायदा क्या हुआ इस मैप को

जेनरेट करने का और ये कोड हमें दिख नहीं

रहा कहीं पे ये कोड आपको दिखेगा नहीं यह

सिर्फ आपके टारगेट एरिया के लिए है ताकि

आप एक जो वेबसाइट पुरी जो आपकी इमेजेस है

उसके अंदर कोऑर्डिनेट्स हैं तो उसे

कोऑर्डिनेट्स पर कहीं पर क्लिक करने पर

क्या करना चाहते हैं कहीं पर क्लिक करने

पर क्या करना चाहते हैं एक तरह से आपकी

इमेजेस का मैप बन गया है यहां पे तो अब इस

मैप का हम उसे कैसे कर सकते हैं अभी आप

क्लिक करिए कुछ भी नहीं होता लेकिन आप गौर

से देखेंगे तो जैसे आप फेस पे लेके जाते

हैं आपका कर्सर अब कन्वर्ट हो गया है एक

हैंड पे जो clickbal है अभी कोर्स पर नहीं

है लेकिन जैसे ही मैं एचटीएमएल पे जाता

हूं वापस से ये क्लिक हो गया है अब इसका

फायदा क्या एक ही इमेज पे आप कहां पे आपका

यूजर क्लिक कर रहा है उसके बेसिस पे आप

डिफरेंट कम कर सकते हैं अब ये सारा कम

करने के लिए हमें क्या करना पड़ेगा छोटा

सा कोड लिखना पड़ेगा

तो ये जो जावा स्क्रिप्ट है आपको सीखने की

जरूरत नहीं है छोटी सी ज्यादा से होता है

बस आपको पढ़ते ही समझ में ए जाएगी तो इतना

ज्यादा परिसर नहीं है तो हम क्या करेंगे

यहां पे जाएंगे यहां पे हमारा सारा मैप हो

गया है जैसे हमने स्टाइल टैग लिखा था वैसे

ही हम स्क्रिप्ट टैग भी लिख सकते हैं और

उसके अंदर हम जावा स्क्रिप्ट का कोड लिख

सकते हैं तो हम यहां पे क्या कर रहे हैं

सिंपल से दो जावा स्क्रिप्ट के फंक्शन बना

रहे हैं अभी क्या करते हैं क्या होते हैं

ये सब हम डिटेल में जानेंगे पर अभी नहीं

हम इसको लिख देते हैं वैन और ये हमारा

फंक्शन हो गया इतना सा कम है इस फंक्शन का

कोई खास कम नहीं है ये सिर्फ हमें अलर्ट

मैसेज देगा और यहां पर हम लिखेंगे

यू कलेक्ट ऑन वैन सिंपल सा कम है इसी तरह

से बनाएंगे वापस से शॉर्टकट तो याद ही

होगा सभी को यह हमने डुप्लीकेट करो और यह

हमने लिखा यहां पर इस बार की हमें तू

चाहिए

जो की अलर्ट करते हैं

अब हम क्या कर सकते हैं की किस इमेज के

कौन से एरिया पे कौन से जॉन पे कौन से मैप

पे हमारा टारगेट क्लिक हुआ है वो भी हम

यहां से देख सकते हैं ऑन क्लिक फंक्शन से

यह थोड़ा समझो स्क्रिप्ट जब स्टार्ट

करेंगे तब और भी इस तरह के बहुत सारे फैन

करेंगे बट अभी हम सिंपली देखते हैं की ऑन

क्लिक फंक्शन तो हमने सिंपली ऐड कर यहां

पे ऑन क्लिक फंक्शन और कॉल कर लिया वैन को

तो यहां पर ऑन क्लिक हो तो वैन रन कर दो

और इसी तरह से कॉपी करते हैं इसको और अगर

यहां पर कोई इस एरिया में टारगेट कर रहा

हो तो यहां पर तू को क्लिक कर दो तो हमने

यहां पर लिख दिया

फंक्शन को रन करना है सिर्फ रेफरेंस नहीं

देना है तो ये हम और भी डिटेल में पढ़ेंगे

बाद में अभी हम छोटा सा इतना सा जानते हैं

अभी हम जब यहां पे क्लिक करते हैं तो यहां

पे वैन क्लिक होता है यहां पर क्लिक करते

हैं तो तू क्लिक होता है तो कहने का मतलब

ये है की अगर आपको एचटीएमएल और इमेजेस और

सकता का इंडेक्स नॉलेज है तो बहुत सारे

ऐसे कम कर सकते हैं जिनके लिए लोग बहुत

सारी जावास्क्रिप्ट उसे करते हैं और उसको

उसे करने की जरूरत नहीं है तो अभी के लिए

हम इतना ही देखेंगे और ध्यान रहे इस कोड

के बारे में ज्यादा ना सोचे ये सिर्फ आपको

एक डेमो देने के लिए था इंपॉर्टेंट यह है

की आप मैप्स क्रिएट कर सकते हैं किसी भी

इमेजेस का और उसके कोऑर्डिनेट्स भी तैयार

कर सकते हैं और कहीं ना कहीं इसी तरह से

फेसबुक अपने जो इमेजेस में फ्रेंड्स

फ्रेंड्स को टैग करता है या फिर

इंस्टाग्राम पे अपने फ्रेंड्स को टैग करते

हो यह सब इसी तरह से होता है तो आई थिंक

आप सभी लोगों को यह वीडियो पसंद आया होगा

पसंद आया तो सब्सक्राइब करिए और मिलते हैं

अगले वीडियो में