⇓

The Problem of Embedding Media ⏯️

A modern webpage needs more than just text and images. We often need to include audio and video directly on the page. HTML5 provides native tags for this, so we don't have to rely on external plugins.

The <audio> Tag

Problem: How do we embed a playable audio file with controls?
Solution: Use the <audio> tag with the controls attribute. The best practice is to nest <source> tags inside to provide multiple file formats as fallbacks for different browsers.

Code:

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

Example (placeholder file, controls are visible):

The <video> Tag

Problem: How do we embed a video file with controls and a set size?
Solution: Use the <video> tag. It works just like the audio tag and also supports the height, width, and poster (for a thumbnail) attributes.

Code:

<video controls width="300" poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

Example (placeholder file, controls are visible):

The <iframe> Tag for External Content

Problem: How do we embed content from another website, like a YouTube video?
Solution: Use the <iframe> tag. For YouTube, you must use the special /embed/ URL format.

Code:

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VbABSAm1a4A" 
    title="YouTube video player" 
    allowfullscreen>
</iframe>

The Problem of Building a Multi-Page Website

Problem: Most websites have multiple pages (Home, About, Contact). How do we create these pages and link them together?
Solution: Create separate HTML files for each page and use the anchor <a> tag to create navigation links between them. A consistent navigation bar is often placed in the <header> of each page.

Code for a Navigation Menu:

<header>
    <nav>
        <a href="./index.html">Home</a>
        <a href="./about.html">About Us</a>
        <a href="./contact.html">Contact</a>
    </nav>
</header>

Example (these links assume other files exist):

The Problem of Special Characters (HTML Entities)

Problem: How do you display characters that have a special meaning in HTML, like <, or symbols not on the keyboard, like ©?
Solution: Use HTML Entities, which are special codes that the browser displays as symbols.

Code and Examples:

The Problem of Making Your Website Public 🚀

Problem: Your website works on your computer, but how do you make it live on the internet for anyone to see?
Solution: Deployment. You upload your project folder to a hosting service like Netlify.

The Netlify Drop Process:

1. Create a free account on Netlify.
2. Go to the "Sites" section.
3. Drag your entire project folder (the one containing index.html) into the drag-and-drop area.
4. Netlify will upload your files and give you a live, public URL for your website.

Sources: Internet. All copyrights © reserved #DarkProgrammer, Let's connect.