- Introduction to HTML
- What is HTML
- Structure of an HTML Document
- Importance of Doctype
- Tags
- Elements
- Attributes
- Example with Tags, Elements, and Attributes
- Understanding the head and body Tags in HTML
- The Head Tag
- The Body Tag
- HTML Text Fundamentals
- Text Formatting Tags
- Paragraphs
- Strong Emphasis
- Emphasis
- Nuances of White Space in HTML
- Convention of Using Lowercase for Tags
- Working with Lists and Links in HTML
- Creating Ordered and Unordered Lists
- Ordered Lists
- Unordered Lists
- Creation of Hyperlinks Using the <a> Tag
- Creating Internal Links
- Creating External Links
- Adding Images and Media in HTML
- Embedding Images Using the <img> Tag
- Embedding Videos and Audio
- Video
- Audio
- Responsive Media Using HTML5
- Working code for embedding images, videos, and audio
- HTML Forms and Input Types
- Overview
- Creating Forms with the <form> Tag
- Importance of the <label> Tag for Accessibility
- Working code for HTML Forms and Input Types
- Tables in HTML
- Tables in HTML Overview
- Creating and Structuring Tables
- Importance of Table Accessibility
- Styling Options
- Working code for Tables in HTML
- Semantic HTML
- Semantic HTML Overview
- Importance of Semantic HTML
- Header Tag
- Nav Tag
- Article Tag
- Section Tag
- Footer Tag
- Example of a Semantic HTML Layout
- Advanced HTML Attributes
- Advanced HTML Attributes Overview
- The id Attribute
- The class Attribute
- The style Attribute
- Custom data Attributes
- Complete working code for Advanced HTML Attributes
- HTML Document Head
- HTML Document Head Overview
- Title Tag
- Meta Tags
- Link Tag
- Script Tag
- Working Code Sample
- Building a Simple Webpage Using HTML
- Project
- Project Overview
- Key Takeaways
- Course Summary
Working code for embedding images, videos, and audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Embedding Example</title>
<style>
img, video, audio {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Embedding Media in HTML</h1>
<h2>Embedded Image</h2>
<img src="path/to/image.jpg" alt="Description of the image">
<h2>Embedded Video</h2>
<video controls>
<source src="path/to/movie.mp4" type="video/mp4">
<source src="path/to/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<h2>Embedded Audio</h2>
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
<source src="path/to/audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Explanation of code:
HTML Structure: The code begins with a <html> element that declares English as the language and the typical <!DOCTYPE html> declaration. It has a title, viewport settings for responsiveness, a <style> element for CSS rules, and a <head> section with character encoding.
CSS Rules: Within the <style> tag, CSS makes sure that photos, videos, and music all scale proportionately with the width of the device, keeping their aspect ratios within reason and never going wider than the screen.
Media Elements:
- Image: The <img> element is used, with alt serving as a substitute written description and src referring to the image file.
- Video: The control element of the <video> tag lets the user change the volume, pause, and play the video. It makes use of several <source> elements to work with various browsers.
- Audio: The <audio> tag supports numerous <source> tags and controls to support different audio formats, just like the video tag does.
This code offers a thorough illustration of how to incorporate and handle media into a webpage, guaranteeing that it is adaptable and viewable on various platforms and web browsers.
ChatGPT
Python
PowerShell
PL/SQL
Spring Boot
CSS
