Created by Turbolearn AI
Media Tags in HTML
In this lecture, we'll explore how to integrate various media types into HTML
documents, including:
Audio files
Video files
Images
External web pages
YouTube videos
We will also create a project using modern HTML tags to demonstrate these
concepts.
Images
You can add images to an HTML document using the <img> tag.
<img src="path/to/image.jpg" alt="Image description">
src: Specifies the path to the image file.
alt: Provides alternative text if the image cannot be displayed.
Example:
<img src="logo.png" alt="Logo Image">
You can also adjust the size of the image using the width and height attributes:
<img src="logo.png" alt="Logo Image" width="500">
Homework: Research the loading="lazy" attribute and how it can improve
page performance.
Page 1
Created by Turbolearn AI
Audio
To add audio to your web page, use the <audio> tag.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
controls: Adds audio controls like play, pause, and volume.
source: Specifies the audio file and its type.
Alternatively, you can embed audio using the <source> tag within the <audio> tag:
<audio controls>
<source src="audio_file.mp3" type="audio/mp3">
</audio>
In this setup, the controls attribute is essential for users to interact with the audio.
Video
The <video> tag allows you to embed video content into your HTML.
<video src="video.mp4" width="640" height="360" controls>
Your browser does not support the video element.
</video>
src: Specifies the path to the video file.
width & height: Set the dimensions of the video player.
controls: Provides video controls.
Example:
Page 2
Created by Turbolearn AI
<video src="video_file.mp4" height="500" controls></video>
Like with audio, the controls attribute is needed to display video controls.
Adding Media to HTML Documents
Adding Video
To add a video to your webpage, use the <video> tag:
<video controls>
<source src="video_file.mp4" type="video/mp4">
</video>
The controls attribute allows users to control video playback.
Alternatively, you can use the <source> tag:
<video controls height="500">
<source src="video_file.mp4" type="video/mp4">
</video>
Here, we've set the video height to 500 pixels. Pixels will be explained later.
Adding Audio
Adding audio clips to your webpage is very similar to adding video.
Iframes
An iframe (Inline Frame) is an HTML element that allows you to embed another
HTML document within the current page.
Page 3
Created by Turbolearn AI
iFrames can be used to embed external websites, YouTube videos, maps,
or any other web content directly into your webpage.
Let's look at the syntax for implementing iframes:
<iframe src="URL" title="description"></iframe>
src:Specifies the URL of the page to embed.
title: Adds a title for accessibility.
You can also add height and width attributes.
Example of embedding a local HTML file:
<iframe src="./lecture10/index.html" width="800" height="600"></iframe>
This code embeds the index.html file from the lecture10 directory into the current
page with a specified width and height.
Embedding YouTube Videos
To embed a YouTube video using an iframe, you need to modify the video URL:
1. Replace watch?v= with embed/ in the URL.
2. Remove the ?v= and everything before the equals sign.
For example, change this: https://www.youtube.com/watch?v=YOUR_VIDEO_ID
To this: https://www.youtube.com/embed/YOUR_VIDEO_ID
<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"></iframe>
Modern HTML Tags
Page 4
Created by Turbolearn AI
Modern HTML offers semantic tags that provide better structure and meaning to your
documents. Here are some examples:
<header>: For the header section of your page.
<nav>: For navigation links or the navigation bar.
<footer>: For the footer section.
<main>: For the main content of your page.
<aside>: For sidebars or related content.
These tags improve the semantic structure of your document.
Building a Complex Page
Now, let's look at how to create a complex webpage layout, breaking it down into
sections:
Header: Contains the main heading.
Image: Displays a relevant image.
Bookmarks: Navigation links (like a road map) that jump to different sections of
the page.
Headings and Paragraphs: Descriptive content.
Media Files: Audio and video files.
Embedded Videos: YouTube videos.
Footer: The footer section of the page.
Let's make the most of HTML!
Lecture Study Guide
Heading and Structure
Initial heading created using the <header> tag.
HTML inserted within the header tag, e.g., "Welcome to Code Help."
Creating a Section with Image and Navigation
Links
Page 5
Created by Turbolearn AI
Mimicking a layout with an image on one side and navigation links on the other.
Structuring the layout using tables:
A table contains a row.
The row contains two items: an image and a list of links.
<table>
<tr>
<td>
<img src="image.jpg" alt="Image">
</td>
<td>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
</td>
</tr>
</table>
Navigation Links with Unordered Lists and Anchor Tags
Navigation links are implemented using:
An unordered list (<ul>).
List items (<li>) containing anchor tags (<a>).
Each list item acts as a bookmark that links to a specific section.
Semantic addition: Wrapping the list of links in a <nav> tag.
<nav>
<ul>
<li><a href="#">Roadmap Video</a></li>
<li><a href="#">Operating System</a></li>
<li><a href="#">DBMS</a></li>
<li><a href="#">DSA</a></li>
<li><a href="#">Web Development</a></li>
</ul>
</nav>
About Section: Heading and Paragraph
Page 6
Created by Turbolearn AI
Creating a section with a heading and a paragraph.
Using <h2> for the heading "About Code Help".
Using <p> tag for inserting a paragraph.
Additional Media Section: Audio and Video
Files
Creating a section for additional media, including audio and video files.
Structuring the section using a table with two columns: one for audio and one
for video.
Inserting audio using the <audio> tag with the controls attribute.
Inserting video using the <video> tag.
<table>
<tr>
<td>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</td>
<td>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</td>
</tr>
</table>
Road Map Video Section
Creating a section for road map videos.
Using the <section> tag to group the content.
Structuring the videos in a table with two rows and three columns each.
Inserting videos using <iframe> tags.
Setting the width and height attributes for each video.
Specifying the video source using the src attribute.
Page 7
Created by Turbolearn AI
<section>
<h2>Roadmap Videos</h2>
<table>
<tr>
<td><iframe width="450" height="250" src="video1.mp4"></iframe></td>
<td><iframe width="450" height="250" src="video2.mp4"></iframe></td>
<td><iframe width="450" height="250" src="video3.mp4"></iframe></td>
</tr>
<tr>
<td><iframe width="450" height="250" src="video4.mp4"></iframe></td>
<td><iframe width="450" height="250" src="video5.mp4"></iframe></td>
<td><iframe width="450" height="250" src="video6.mp4"></iframe></td>
</tr>
</table>
</section>
Bookmarks
Bookmarks allow navigation to specific sections within a single page.
Creating a bookmark involves:
Wrapping the road map video section in a <section> tag.
Adding an id attribute to the section to serve as the bookmark's target.
Using anchor tags (<a>) with the href attribute set to the id of the target
section.
Bookmark Definition: A bookmark enables users to jump to specific parts
of a webpage, enhancing navigation and user experience.
Creating Bookmarks Within a Page
To create bookmarks within a webpage, allowing for quick navigation to different
sections, follow these steps:
1. Assign an ID to the section you want to bookmark.
2. Create an anchor tag (<a>) that references the ID.
Example
Page 8
Created by Turbolearn AI
<!-- Section Definition -->
<section id="roadmap-section">
<h2>Roadmap</h2>
<!-- Content -->
</section>
<!-- Bookmark Link -->
<a href="#roadmap-section">Go to Roadmap</a>
When the link "Go to Roadmap" is clicked, the page will navigate to the section with
the ID "roadmap-section".
Setting Up Multiple Bookmarks
To set up multiple bookmarks within a page, repeat the above process for each
section you wish to create a bookmark for. Each section should have a unique ID, and
the anchor tags should reference these IDs accordingly.
Structuring a Webpage with Semantic HTML
To improve the structure and semantics of a webpage, use the following HTML5
tags:
<header>: Contains introductory content, typically navigation or a heading.
<nav>: Defines a section of navigation links.
<main>: Specifies the main content of the document.
<footer>: Defines a footer for a document or section, typically containing
copyright information, links, etc.
By using these semantic tags, you can divide your HTML code into more readable and
structured blocks. The lecture example mentioned cutting the header, navigation, and
footer and wrapping the remaining content within a <main> tag to improve structure.
Embedding Media
Audio Files
To embed an audio file, use the <audio> tag:
Page 9
Created by Turbolearn AI
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video Files
To embed a video file, use the <video> tag:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
You can adjust the width and height attributes to resize the video.
Attributes
Additionally, you can add the autoplay and muted attributes to your videos. For
example, including autoplay="1" inside of a <video> tag automatically begins playing
the video once it is loaded. Similarly, muted="1" mutes the video.
Embedding External Documents
IFrame
To embed another HTML document or webpage, use the <iframe> tag:
<iframe src="external_document.html" height="200" width="300"></iframe>
Embedding YouTube Videos
Page 10
Created by Turbolearn AI
You can also use <iframe> to embed YouTube videos:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/your_video_id">
</iframe>
Replace "your_video_id" with the actual video ID from YouTube.
Tables for Alignment
In the lecture example, tables were used to help with alignment. The professor did
note that the table may not be needed when using Flexbox or Grid.
Key Takeaways
You can use media tags to embed different files into HTML
You can use <iframe> to embed YouTube videos or external documents
Semantic HTML tags improve your code structure
Bookmarks allow for easy navigation within a page
Page 11
