Lecture 6: Media Tags and Multi-Page Website in HTML
Media Tags in HTML
HTML provides special tags to embed **audio** and **video** files directly into a web page. These are:
<audio>→ used for playing sound/music files.<video>→ used for playing video files.
1. Audio Tag
Code:
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Output:
2. Video Tag
Code:
<video controls width="320" height="240">
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Output:
Explanation
controls→ adds play, pause, and volume buttons.src→ specifies the file location.type→ defines the file format (likeaudio/mpegorvideo/mp4).- You can include multiple
<source>for different formats.
Creating a Multi-Page Website in HTML
A multi-page website means having multiple HTML files (like index.html, about.html, contact.html) that are linked together using the <a> (anchor) tag.
1. Home Page
Code:
<!doctype html>
<html>
<head><title>Home Page</title></head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the home page.</p>
<a href="about.html">Go to About Page</a>
</body>
</html>
Output interface:
Welcome to My Website
This is the home page.
Go to About Page (This is link if you run on you compiler shows it by blue Color)2. About Page
Code:
<!doctype html>
<html>
<head><title>About Page</title></head>
<body>
<h1>About Us</h1>
<p>This is the about page.</p>
<a href="index.html">Back to Home</a>
</body>
</html>
Output interface:
About Us
This is the about page.
Back to Home (This is link if you run on you compiler shows it by blue Color)Explanation
- Each page is a separate
.htmlfile. - Pages are connected using
<a href="page.html">. - A navigation bar (menu) helps users move between pages.
The last topic is How to Generate the Copyright Symbol © in HTML
The copyright symbol © can be displayed on a webpage using two main methods:
Using HTML Entity
- HTML provides a special code called an entity for certain symbols.
- Code: ©
Using Unicode Code
- Every character has a unique Unicode number.
- Code: ©
Thank you so much for visiting and learning with us about HTML! We’d love to hear from you, so please feel free to reach out with any questions or feedback.