HTML Session on iframe,video,audio,img ,div form and input tags
iframe - Program 1
An iframe is used for displaying a web page within another page.
Sample code on the use of iframe is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<h5>Display a webpage</h5>
<iframe src="https://codespindle.com/" height="400px" width="600px" frameborder="0" title="iframe is displaying codespindle.com webpage" ></iframe>
</body>
</html>
Output
iframe - program 2
Code for using a target variable with an iframe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<h5>Display a webpage</h5>
<iframe src="newpage.html" name="satish_iframe" height="400px" width="600px" frameborder="0" title="iframe is displaying codespindle.com webpage"></iframe>
<br>
<a href="https://codespindle.com" target="satish_iframe">Click Here</a>
</body>
</html>
Output
<video> element in HTML
<video> is used for embedding videos in your HTML page. Video
tag comes with the following attributes
- loop - The video playback will be in loop mode
- muted - This property will mute the video on autoplay
- autoplay - This property will enable the autoplay of the video
- controls - The controls of the video will be displayed
Sample code and output is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<caption>Visual Studio Code Installation</caption><br>
<video src="video/installation.mp4" height="300" width="300" controls autoplay muted loop></video>
</body>
</html>
Output
<audio> element in HTML
<audio> is used for embedding audio file in your HTML page. audio
tag comes with the following attributes
- loop - The audio playback will be in loop mode
- muted - This property will mute the audio on autoplay
- autoplay - This property will enable the autoplay of the audio
- controls - The controls of the audio will be displayed
Sample code and output is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<audio src="audio/way.mp3" controls loop autoplay muted></audio>
</body>
</html>
Output
img tag - Program 1
Code for using an image on a webpage using img html tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<img src="images/caption.JPG" alt="image displaying simple html table with caption">
</body>
</html>
Output
img tag - Program 2
Code for using an image as an hyperlink.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<img src="images/caption.JPG" alt="image displaying simple html table with caption">
</body>
</html>
Output
div tag
A div tag is used for creating different divisions in your content and aids the application of styles easily.
Sample code on use of div with class and id attributes is given below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
<style>
.a{
background-color: aqua;
}
.b{
background-color: burlywood;
}
#abc
{
width: 300px;
}
</style>
</head>
<body>
<div class="a">
This content belongs to division of class a
</div>
<div class="b" id="abc">
This content belongs to division of class b
</div>
<div class="a">
This content belongs to division of class a
<div class="b">
This content belongs to division of class b
</div>
</body>
</html>
Output
form and input tags
Code demonstrating the use of the various input types in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<form>
<label for="username">Enter your username</label>
<input type="text" required maxlength="10" name="username"><br>
<label for="password">password</label>
<input type="password" required name="password"><br>
<!-- radio-->
<label for="gender">Select your gender</label><br>
<input type="radio" name="gender" value="Male">
<label for="Male">Male</label><br>
<input type="radio" name="gender" value="Female">
<label for="Female">Female</label><br>
<!-- checkbox-->
<label for="subjects">Select your subjects</label><br>
<input type="checkbox" name="subject1" id="subject1" value="chemistry" checked>
<label for="chemistry">chemistry</label><br>
<input type="checkbox" name="subject2" value="physics">
<label for="physics">physics</label><br>
<!--date-->
<label for="birthdate">Enter your Birthdate</label>
<input type="date" min="2022-12-19" max="2022-12-31"><br>
<!--range-->
<label for="recommendation">Select your recommendation</label>
<input type="range" min="0" max="5"><br>
<label for="email">Enter your email</label>
<input type="email" required><br>
<!--drop down-->
<label for="country">Select your country</label>
<select name="country" id="country1">
<option value="India">India</option>
<option value="US">US</option>
<option value="UK">UK</option>
</select><br>
<label for="marks">Enter your marks</label>
<input type="number" min="0" max="5"><br>
<label for="search">Enter text to search</label>
<input type="search"><br>
<input type="submit" value="submit">
<input type="reset">
</form>
</body>
</html>
Output
<hr> element in HTML
<hr> is used for displaying an horizontal line.Sample code is given below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint soluta ratione laudantium. Neque, rerum exercitationem nostrum nesciunt reprehenderit vel ipsum quas est ab optio magni porro quaerat necessitatibus culpa beatae.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur voluptatum fugit repellendus deserunt quas eligendi id labore reiciendis explicabo. Nihil rerum, autem minus officiis porro tempore qui harum reiciendis nam!</p>
</body>
</html>
Output
<br> element in HTML
<br> is used for giving a line break. It has no closing tag.
Sample code is given below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint soluta ratione laudantium. Neque, rerum exercitationem nostrum nesciunt reprehenderit vel ipsum quas est ab optio magni porro quaerat necessitatibus culpa beatae.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur voluptatum fugit repellendus deserunt quas eligendi id labore reiciendis explicabo. Nihil rerum, autem minus officiis porro tempore qui harum reiciendis nam!</p>
</body>
</html>
Output
