Scribd
Upload
49 views

HTML 5

IT journal

Uploaded by

gajraheer00
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

HTML 5

IT journal

Uploaded by

gajraheer00
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Question:

Use of Audio on web pages using html5.


Create a webpage named audio.html to set an audio file in web page with controls
such that it uses html 5 elements. The audio file must play as soon as the webpage
loads in browser and it will start over again, every time when it is completed.
SOLUTION:
Page1:
<!DOCTYPE html>
<head>
<title> audio </title>
</head>
<body>
<Audio Src ="ABC. mp3" type="audio/mp3" autoplay controls loop= -1>
</audio>
</body>
</html>

Page2:
<!DOCTYPE html>
<head>
<title> audio 1 </title>
</head>
<body>
<audio controls Loop= -1 autoplay>
<Source src= "ABC.mp3" type="audio/mp3">
<Source src= "ABC.wav" type="audio/wav">
<Source src= "ABC.ogg" type="audio/ogg">
</audio>
</body>
</html>
Question:
Use of video on web pages using html5.
Create a webpage named video.html to display a video file on web page and plays
automatically. The dimension of video area should be 150* 150 pixels. Create
another webpage which provide multiple source file formats for the same video file
that plays a video with controls. The dimension of video area should be 300* 300
pixels. The code must incorporate the list of video files formats (like webM, MP4 or
ogg etc).
SOLUTION:

Page1:
<!DOCTYPE html>
<head>
<title> video </title>
</head>
<body>
<video Src="vid.mp4" type= "video/mp4" width="150px” height="150px" autoplay>
</video>
</body>
</html>

Page2:
<!DOCTYPE html>
<head>
<title> video 1 </title>
</head>
<body>
<video width="300" height="300" controls>
<source src="vid.mp4" type="video/mp4">
<source src="vid.webM" type="video/webM">
<source src= "vid.ogg" type="video/ogg">
</video>
</body>
</html>
Question:
Navigation on an image using Client-side image Mapping in web page using html 5.
Create a webpage named imagemap. html with an inserted image having jpeg, png
or gif extension. Create 3 different shapes (like rectangle, circle and polygon) which
do not overlap. Note down the co-ordinates making use of Ms-Paint/GIMP/Irfan
View/Pinta. Each shape should be mapped or navigate with a different URL, one of
the clickable areas should navigate to a local webpage.
SOLUTION:
<html>
<head>
<title> IMAGE MAPPING </title>
</head>
<body>
<img src=“img.png” usemap=“#imagemap”
<map name =”imagemap”>
<area href=”https://en.wikipedia.org” shape=”rect” coords=“3,5,295,95”/>
<area href=”https://www.google.com” shape=”circle” coords=”140,140,34”/>
<area href=”audio.html” shape=”poly” coords=“3,106,4,280,184,278”/ >
</map>
<br>
</body>
</html>
Question:
Creation of website using HTML5
Create a website using html5 and CSS using any 4 css properties. Write a code for 2
separate pages having different file name such first page as index.html, 2nd page as
page2.html as form.html. Use any theme such as college profile or company profile
etc. Every page must contain proper Meta information and design webpage as
follows:
1) The index page must contain a heading which is highest among other text on
pages and must be at center of the page. There must be a paragraph which
introduces general information about the theme chosen. It must have at least 3
physical style tags and one image with alternate text. This page must be connected
to other page with proper navigational links.
2) The 2nd page must contain the feedback or enrollment form related with theme
chosen with feature of html5. The form must contain text element and email address
of the company or person. Include the submit button.
SOLUTION:
Page1:
<!DOCTYPE html>
<head>
<title> index </title>
<style>
h1{ text-decoration:overline; color:skyblue;}
b{letter-spacing:15;}
</style>
</head>
<body>
<h1><center> Microsoft word tabs </center> </h1>
Insert Tab:
<p> On the <b style="background-color:pink"> Insert tab</b>, the galleries include
items that are designed to coordinate with the overall look of your document. You
can use these galleries to insert tables, headers, footers, lists, cover pages, and
other document building blocks. When you create pictures, charts, or diagrams, they
also coordinate with your current document look. You can easily change the
formatting of selected text in the document text by choosing a look for the selected
text from the Quick Styles gallery on the <b>Home tab</b>. You can also format text
directly by using the other controls on the <b>Home tab</b>. </p>
<br>
<center><img src="insta.jpg" alt=”insta id” height="70px" width="70px"> <br>
Our insta id: <font size="5"> MSoffice_2007 </font></center>
<a href="form.html"> Click here to go to the to form.... </a>
</BODY>
</html>
Page2:
<!DOCTYPE html>
<head>
<title> form </title>
</head>
<body>
<h1> <center> Feedback Form </center> </h1>

<form method="get" action="index.html">


Name:<input type="text" name="t1" placeholder="enter your name"> <br> <br>
Mobile number:<input type="tel" pattern="^[7-9][0-9]{9}$" name="tel"> <br><br>
Write your feedback here: <br>
<textarea rows=4 cols=40> </textarea> <br>
<input type="submit"> <br><br>
Contact details: <br>
<input type="email" value="[email protected]" readonly>
<input type="tel" pattern="^[7-9][0-9]{9}$" name="tel1" value="9900224536"
readonly> <br><br>
</form>

<a href="index.html"> Click here to go back to home page...... </a>


</BODY>
</html>
Question:
Create a webpage using HTML and CSS code to design a web page as the layout
displayed below.
The top section will display the heading ,’Tourist places’ in header. The section on
the left has list of cities. The right hand side display tourist places in any one of the
city .
Use Inline style sheet in the top section to display background colour for the text
‘Tourist places’. Use internal stylesheet for the left and right section with background
colours and font style.
SOLUTION:
<!DOCTYPE html>

<head>
<title> Touist places </title>
<style>
#a{display:inline-block; background-color:lightyellow; position:absolute; left:25.1%;
height: 20%; width:25%; top:111px; border:solid black 3px}
#b{display:inline-block; background-color:pink; position:absolute; right:25.1%;
height:20%; width:25%; top:111px; border:solid black 3px)
</style>
</head>
<body>

<header>
<center>
<h1 style="background-color:skyblue; text-align:center; width:50%; height:100px;
color:purple; border:solid black 3px;font-size:80px "> Tourist Places </h1>
</center>
</header>
<section id="a">
<ol>
<b> City </b>
<li> Pune </li>
<li> Banglore </li>
<li> Hyderabad </li>
<li> Delhi </li>
</ol>
</section>
<section id="b">
<ol>
<b> Tourist places in Pune </b>
<li> Shaniwarwada </li>
<li> Kelkar museum </li>
<li> Shingad fort </li>
</ol>
</section>
<body>
</html>

You might also like