Web Development Course Class 19

Iframe Tag in HTML Web Development Course Class 19

Definition in English:
The

This embeds “example.com” inside the webpage.

2. Embedding a YouTube Video:
   html

This embeds a YouTube video in the webpage.

3. Google Maps Embedding:
   html

| src | Specifies the URL of the page to be embedded | داخل ڪيل صفحي جو URL ڏئي ٿو |
| width | Defines the width of the iframe | آءِ فريم جي ويڪر مقرر ڪري ٿو |
| height | Defines the height of the iframe | آءِ فريم جي اوچائي مقرر ڪري ٿو |
| frameborder | Defines whether the iframe has a border (0 = No, 1 = Yes) | آءِ فريم جي بارڊر کي مقرر ڪري ٿو |
| allowfullscreen | Allows fullscreen mode for embedded content | مڪمل اسڪرين موڊ کي فعال ڪري ٿو |
| sandbox | Adds security restrictions to the iframe | آءِ فريم تي حفاظتي پابنديون لاڳو ڪري ٿو |

Bonus Tip for Beginners: Web Development Course Class 19

• Always use allowfullscreen when embedding videos for a better user experience.
• If embedding an external webpage, ensure it allows embedding via iframes; some websites block it.
• Use sandbox for security when embedding unknown or third-party content.
  1. Auto-Suggestion in Web Page Using <datalist> in HTML5

Definition in English:
The <datalist> tag in HTML5 is used to provide an autocomplete feature for an input field. It allows users to select from a predefined list of suggestions as they type.

Definition in Sindhi:
<datalist> ٽيگ HTML5 ۾ هڪ آٽو-سجيسشن فيچر مهيا ڪري ٿو، جيڪو يوزرز کي هڪ اڳواٽ مقرر ڪيل لسٽ مان چونڊ ڪرڻ جي سهولت ڏئي ٿو، جيئن هو لکڻ شروع ڪن.

Usage in HTML5: Web Development Course Class 19

<label for="city">Select a city:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
    <option value="Karachi">
    <option value="Lahore">
    <option value="Islamabad">
    <option value="Quetta">
    <option value="Peshawar">
</datalist>

📌 As users type in the input field, they will see suggestions from the <datalist> options.

2. <details> and <summary> Widget in HTML5

Definition in English: Web Development Course Class 19

• <details>: This tag creates a collapsible section that can be expanded or hidden when clicked.
• <summary>: This tag provides a heading for the <details> section, which is visible by default.

Definition in Sindhi:

• <details>: هي ٽيگ هڪ اهڙو سيڪشن ٺاهيندو آهي، جيڪو ڪلڪ ڪرڻ تي کولجي يا بند ٿي سگهي ٿو.
• <summary>: هي ٽيگ <details> سيڪشن لاءِ ھڪ سرنامو مهيا ڪندو آهي، جيڪو ڊفالٽ طور تي نظر ايندو.

Usage of <details> and <summary> in HTML5:

<details>
  <summary>Click to learn more</summary>
  <p>This is the hidden content that appears when the details tag is expanded.</p>
</details>

📌 When the user clicks on “Click to learn more,” the hidden content will be revealed.

Usage in Websites: Web Development Course Class 19

• Auto-Suggestion (<datalist>) is useful for search bars, forms, and dropdown lists.
• Collapsible Sections (<details> and <summary>) are great for FAQs, hidden information, and improving page organization.

Tips for Beginners: Web Development Course Class 19

✅ Use <datalist> for better user experience in forms.
✅ <details> and <summary> improve content readability without cluttering the page.
✅ Keep <summary> text clear and concise.
✅ Test <datalist> on mobile devices to ensure proper functionality.

These HTML5 elements enhance user experience and interactivity on modern websites! 🚀