Defence Web Development Course (HTML)

Lecture-6: Deploy Your First Project | Media Tag | Multi Page Website

Class Content:

• Media Tag
• Integrating Audio Files & Adding Controls to Audio
• Integrating Video Files
• Audio: Proper Formats
• Why Proper Formats are Needed
• Video: Proper Formats
• Embedding YouTube Videos
• Embed Tag & Its Importance
• Allow Fullscreen in Videos
• Creating Multi-Page Websites
• Deploying a Website on Netlify

📖 Full detailed notes here: Open in Notion

Class Summary:

• Media Tag

  HTML5 introduced dedicated media tags (<audio> and <video>) for embedding multimedia content directly into web pages without requiring external plugins. These tags provide native browser support for playing audio and video files.

• Integrating Audio Files & Adding Controls to Audio

  The <audio> tag is used to embed sound content. The 'controls' attribute adds audio controls like play, pause, and volume. Multiple source files can be provided using <source> tags for browser compatibility.

• Integrating Video Files

  The <video> tag embeds video content in web pages. Similar to audio, it supports the 'controls' attribute and multiple source files. Additional attributes like 'width', 'height', and 'poster' (for thumbnail image) can be used.

• Audio: Proper Formats

  Common audio formats for web include MP3 (widely supported, good compression), WAV (uncompressed, high quality but large file size), and OGG (open format, good compression). Providing multiple formats ensures cross-browser compatibility.

• Why Proper Formats are Needed

  Different browsers support different media formats. Using proper, widely-supported formats ensures your media content works across all major browsers. Providing fallback options is essential for accessibility and user experience.

• Video: Proper Formats

  Common video formats include MP4 (most widely supported), WebM (open format, good compression), and OGG (open format). MP4 with H.264 video codec and AAC audio codec is currently the most compatible format for web video.

• Embedding YouTube Videos

  YouTube videos can be embedded using the <iframe> tag with the video's embed URL. This method leverages YouTube's player infrastructure and provides consistent playback across devices without hosting the video files yourself.

• Embed Tag & Its Importance

  The <embed> tag is used to embed external content such as plugins, though it's largely replaced by more specific tags like <audio>, <video>, and <iframe>. It was historically important for including multimedia before HTML5.

• Allow Fullscreen in Videos

  The 'allowfullscreen' attribute (used in <iframe> tags) or the 'allow' attribute with 'fullscreen' value enables the fullscreen button in embedded videos. This provides users with an immersive viewing experience.

• Creating Multi-Page Websites

  Multi-page websites consist of multiple HTML documents linked together through navigation. Each page typically shares common elements (header, footer, navigation) while having unique content. Proper file organization and relative linking are essential.

📂Additional Resources:

• 💻 Sample Code and Practice Questions: View on GitHub

• 💻 Blog Article: View on GitHub

Practice Questions:

1. The question was provided on the GitHub repo

Ask Your Question: