Topic 3 : iframe (embed, Albums-embed, video-embed, maps, Input tag introduction)

Lesson: Embedding Content and Understanding Input Types in HTML

Introduction to <iframe>

Imagine <iframe> as a window in your website’s wall that lets you display content from elsewhere on the web. It’s like looking through a window into another room without leaving where you are.

Using <iframe> for Various Embeds

1. Video Embed: To show a YouTube video on your page:
   <iframe id="videoFrame" src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>

   • id: Helps you uniquely identify this iframe when you need to manipulate it with CSS or JavaScript.
   • src: Specifies the URL of the page that the iframe will display.
2. Albums Embed: To display a Flickr album:
   <iframe id="albumFrame" src="https://www.flickr.com/photos/ALBUM_ID/player/" width="800" height="600" frameborder="0"></iframe>

   • The id attribute here makes it easier to apply specific styles or scripts to this iframe only.
3. Maps Embed: To embed a Google Map showing a location:
   <iframe id="mapFrame" src="https://www.google.com/maps/embed?pb=LOCATION_CODE" width="600" height="450" frameborder="0" allowfullscreen></iframe>

   • The id attribute can be used to refer to this iframe for interactions like resizing on a mobile device.

Comprehensive Guide to <input> Tag

The <input> tag collects user inputs and has several types, each suited for different data inputs. Let’s explore these with examples:

1. Text Input:
   <input type="text" name="username" id="username" placeholder="Enter your username" value="">

   • type: Defines the type of data the input field accepts.
   • name: The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
   • id: Useful for labeling the input with a <label> tag and styling with CSS.
   • placeholder: Provides a hint about what to enter in the input box.
   • value: Defines the initial value; it’s blank here and filled by the user.
2. Radio Buttons:
   <input type="radio" name="gender" id="male" value="male"> Male
<input type="radio" name="gender" id="female" value="female"> Female

   • value: Holds the data that gets sent to the server when a form is submitted.
3. Checkbox:
   <input type="checkbox" name="interest" id="coding" value="coding"> Coding
<input type="checkbox" name="interest" id="music" value="music"> Music

   • name: The name for checkboxes is the same if they belong to a group. This tells the server they are multiple answers to one question.
4. Email:
   <input type="email" name="email" id="email" placeholder="Enter your email" value="">

5. Password:
   <input type="password" name="password" id="password" placeholder="Create a password" value="">

6. Submit Button:
   <input type="submit" name="submit" id="submitBtn" value="Register">

   • type: submit tells the browser to submit the form.
   • value: Specifies the text on the submit button.

Task for You

Create a webpage for an upcoming community event. Use <iframe> to embed a map to the venue, a promotional video, and photos from previous events. Include a form with various <input> types to collect registrations and preferences from attendees. This task will help you practice embedding content and gathering user input effectively.