dear students post your notes and doubts here regarding session 11.
1 Like
MULTIMEDIA
- Adding video file to web page:
Attributes:
width= width of the video file
height= height of the video file
controls= Gives controls to the video files. It doesn’t require any value.
Video formats that are supported in HTML5:
- MP4
- WebM
- OGG
Adding a video file to a web page with a backup in case one file format is not supported:
Eg:
- Adding audio file to web page.
Attributes:
controls= Gives controls to the video files. It doesn’t require any value.
Video formats that are supported in HTML5:
- MP3
- Wav
- OGG
Adding an audio file to a web page with a backup in case one file format is not supported:
Eg:
- iFrame:
It creates a frame in a webpage and add a preview of another webpage. It is done by using the
Note:
- Adding YouTube videos in a web page:
Go to youtube > Click the video that you want to display on your webpage > Click share > Click Embeded > Copy the iframe code and paste in on your html document.
-
Adding Vimieo.com videos in your web page:
Go to Vimeo.com > Click the video that you want to display on your webpage > Click share > Copy the iframe code from the “Embedded box” and paste in on your html document. -
Adding google map location in a web page:
Go to google map > Search the location that you want to show on your web page > Click share > Click Embeded map > Copy the iframe code and paste in on your html document.
2 Likes
Hi Krishna this side from batch FSR060523. This is Session 11 [Practise iframe].
Kindly like project and suggest me how to I will get it better.
Thanks…
Link: https://edyoda-session-eleven-practise.krishnayadav44.repl.co/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
width: 100%;
height: 100%;
background-color: white;
}
div.main{
border: 0px solid black;
width:100%;
height:100%;
margin: 0px;
padding: 0px;
}
div.header_one{
border:0px solid red;
width: 100%;
height: 10%;
margin: 0px;
padding: 0px;
}
h1.one{
font-size: 56px; padding: 0px; margin: 0px 0px 50px 0px; text-shadow: 0px 0px 6px #000000;}
sub{color:black;}
div.menu{ margin-top: -20px; width:100%; height:100px;}
ul{
list-style-type: none;
list-style-position: inside;
margin-top: 33px;
margin-bottom: 10px;
background-color: aqua;
}
li{
float:right;
display: inline;
font-size: 30px;
font-weight: bold;
}
a{
text-decoration: none;
background-color:transparent;
color:#40E0D0;
padding-right: 20px;
}
a:hover{
margin-top:20px;
background-color: none;
color:blue;
text-decoration: underline;
text-underline-position: under;
text-decoration-skip: ink;
text-decoration-color: black;
text-decoration-style: solid;
}
hr{
margin-top:0px;
margin-right:19px;
float: right;
width:27%;
height:1px;
background-color: transparent;
}
div.nav_bar{
width:99%;
height: 100%;
margin-top: -30px;
position: -webkit-sticky; position: sticky; top: 0;
}
#ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#li{
margin-top: -6.5px;
float: left;
padding: 15px;
margin-left: -12px;
}
#a{
font-size: 20px;
display: inline;
color: white;
text-align: center;
padding: 17px;
margin-left: -2px;
text-decoration: none;
}
#a:hover {
background-color: blue;
}
div.iframe{
width: 99%;
height: 900px;
border:0px solid red;
}
iframe.left{
width:17%;
height:100%;
border:none;
margin:0px;
background-color:#D6DBDF;
overflow: scroll;
}
iframe.right{
border: 0px solid red;
width:82.7%;
height:100%;
}
</style>
</head>
<body>
<div class="main"><!--Main Div start-->
<div class="header_one"><!--Header#1 Div start-->
<h1 class="one"><span style="color:red;">Cl</span><span style="color:#00FF00;">a</span><span style="color:#0000FF;">ss</span><sub>JavaScript</sub></h1>
</div><!--Header#1 Div end-->
<div class="menu"><!--Sub-header(Menu) div start-->
<ul>
<li><a href="#">References</a></li>
<li><a href="listIframes.html" target="iframe_a">Exercises</a></li>
<li><a href="#">Tutorials</a></li>
</ul><br><br>
</div><!--Sub-header(Menu) div end-->
<div class="nav_bar"><!--Navigation bar div start-->
<ul id="ul">
<li id="li"><a id="a" href="#html">HTML</a></li>
<li id="li"><a id="a" href="#css">CSS</a></li>
<li id="li"><a id="a" href="index.html">JavaScript</a></li>
<li id="li"><a id="a" href="#about">About</a></li>
</ul><!--Navigation bar div end-->
</div>
<div class="iframe">
<iframe src="listIframes.html" class="left" name="iframe_a">
</iframe>
<iframe src="JS_BQ1.html" class="right" name="iframe_b" scrolling="no">
</iframe>
</div>
</div><!--Main Div end-->
</body>
</html>
4 Likes
very nice babul 
2 Likes
woww amazing krishna you do such a great work your project is very awesome keep it up
2 Likes
2 Likes
Contains all file till now … Please find session11.html & session11.css files and the rar file"drive-download-20230525T150914Z-001" for the multimedia contains.
Thank You
1 Like
Hi Krishna this side from batch FSR060523. This is Session 11 [Practise iframe with video, audio elements].
Kindly like project and suggest me how to I will get it better.
Thanks…
Link : edyoda-session-eleven-practice.krishnayadav44.repl.co
------------------------------------------------HTML-------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session Eleven audio video with iframes</title>
<link href="audioVideoWithIframes.css" rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css2?family=Mogra&family=Inter:wght@200&family=Raleway:wght@300&family=Raleway:wght@900&family=Roboto+Mono:wght@200&family=Dancing+Script:wght@400&family=Caveat&display=swap"
rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="logo">EDYODA</h1>
<nav>
<h1 class="headerHeading">Session Eleven Practise</h1>
<h4 class="myname">Audio-Video-iframes</h4>
</nav>
<aside>
<ul>
<li>
<a href="loveAgain.html" target="mainScreen">Love Gain Dua Lipa</a>
</li>
<li>
<a href="ride IT.html" target="mainScreen">Ride It</a>
</li>
</ul>
</aside>
<main>
<iframe src="loveAgain.html" name="mainScreen"></iframe>
</main>
</body>
</html>
------------------------------------------------CSS--------------------------------------------
html {
scroll-behavior: smooth;
}
body {
background-color: rgb(255, 255, 255);
}
nav {
background-color: #15294B;
border: 0px solid rgb(235, 9, 9);
margin: 0px 0px 0px 0px;
width: 100%;
height: 80px;
}
.logo {
margin: 0px;
padding: 0px;
font-size: 45px;
color: #0087FF;
letter-spacing: -2px;
font-family: 'Raleway', sans-serif;
}
.headerHeading {
margin: 0px;
padding: 17px;
padding-left: 60px;
color: rgb(255, 255, 255);
font-size: 36px;
font-family: 'Raleway', sans-serif;
;
border: 0px solid red;
font-family: 'Inter', sans-serif;
text-align: left;
width: 400px;
display: inline-block;
}
.myname {
margin: 0px;
padding: 18px;
color: rgb(255, 255, 255);
font-size: 26px;
font-family: 'Raleway', sans-serif;
border: 0px solid red;
font-family: 'Inter', sans-serif;
text-align: right;
width: 980px;
display: inline-block;
}
/* Css For Aside Element */
aside {
border: 1px solid brown;
width: 20%;
height: 600px;
display: inline-block;
margin: 0px;
padding: 10px;
}
aside ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
aside ul li {
font-family: cursive;
font-size: 20px;
padding: 5px;
border-radius: 3px;
}
aside ul li:hover {
background-color: rgb(133, 133, 245);
color: rgb(0, 0, 0);
}
aside ul li a {
text-decoration: none;
padding: 0px;
margin: 0px;
color: rgb(0, 0, 0);
}
/* CSS for main element */
main {
background-image: url("https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77700440587.jpg");
border: 1px solid rgb(157, 165, 42);
width: 75%;
height: 600px;
float: right;
margin: 0px;
padding: 10px;
}
main iframe {
border: 0px solid white;
width: 700px;
height: 500px;
margin-left: 20%;
margin-top: 100px;
}
1 Like
mam i had got failed in food web assignment. now i corrected my mistakes can i resubmit my assignment
1 Like
there is no back after that that’s not possible try better next time.
can i show u the code… u see n tell me written code is correct or not…
1 Like
okk you can show me.
FAV FOOD
<style>
.main2 li {
list-style-type: none;
display: inline-block;
margin: 2px;
padding: 10px;
font-size: 20px;
scroll-behavior: smooth;
}
.main3{
border: 30 50px ;
background-color: rgb(88, 87, 87);
}
.main2 li a {
text-decoration: solid;
color:white
}
.text li a{
text-decoration: none;
color: black;
}
html{
scroll-behavior: smooth;
}
.index:hover{
background-color: black;
border: 10 80px;
}
.food:hover{
background-color: black;
border: 10 80px;
}
.about:hover{
background-color: black;
border: 10 80px;
}
</style>
<body>
<header class="main3">
<ul class="main2">
<li class="index"><a href="">index</a></li>
<li class="food"><a href="">food</a></li>
<li class="about"><a href="">about</a></li>
</ul>
</header>
<h1>Top five favorite foods</h1>
<ul class="text">
<li><a href="#cake">cake</a></li>
<li><a href="#biryani">biryani</a></li>
<li><a href="#chocolate">chocolate</a></li>
<li><a href="#pizza">pizza</a></li>
<li><a href="#burger">burger</a></li>
</ul>
<center>
<div class="image1">
<div id="cake"> <img src="" >
</div>
<div>
<p>
cake
</p>
</div>
<div class="image2">
<div id="biryani"><img src="">
</div>
</div>
<div>
<p>
biryani
</p>
</div>
<div id="chocolate"><img src="" alt="chololate pic error">
</div>
<div>
<p>
chocolate
</p>
</div>
<div id="pizza"> <img src="">
</div>
<div>
<p>
pizza
</p>
</div>
<div id="burger"> <img src="">
</div>
<div>
<p>
burger
</p>
</div>
</center>
</body>
1 Like
all things are fine dear but just remove the line scroll behavior from main2 li part because that feature should only be written in either html tag or body tag don’t add this there although you you write later html tag scroll behavior that’s fine .
ok mam thank you. i will cover it in next assignment…
1 Like