The basic structure of HTML v5 webpage –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
The layout of HTML v4.01 vs HTML v5 –
Tags -
<header> It defines a header for any webpage.
<nav> It defines a navbar.
<section> It defines a section.
<article> It defines an independent article.
<aside> It defines a sidebar.
<footer> It defines a footer for any webpage.
The <audio> tag –
Here <audio> tag is used to embed audio in a web page.
Example-
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support audio tag.
</audio>
This tag has the following attributes-
Attribute Description
Controls It defines the audio controls with play/pause buttons.
Autoplay It specifies that the audio will start to play as soon as it is ready.
Loop It specifies that the audio file will start over again, every time when it is completed.
muted It is used to mute the audio output.
Src It specifies the source URL of the audio file.
The <video> tag –
Here <video> tag is used to embed video in a web page.
Example-
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support video tag.
</video>
This tag has the following attributes-
Attribute Description
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is completed.
muted It is used to mute the video output.
src It specifies the source URL of the video file.
The <object> tag –
Here <object> tag used to display diff. types of multimedia as. Webpage, Image, PDFs, Audio or
Video, Plug-In etc.
Example-
1. If you want to add any IMAGE then…
<object data="[Link]" width="250" height="250">
</object>
2. If you want to add any WEBPAGE then…
<object data="[Link]" width="250" height="250">
</object>
3. If you want to add any PDF then…
< object type="application/pdf" data="[Link]" width="250" height="250">
</object>
4. If you want to add any AUDIO then…
<object data="audio.mp3">
</object>
5. If you want to add any VIDEO then…
<object data="video.mp4" width="250" height="250">
</object>
6. If you want to add any FLASH movie then…
<object type="application/x-shockwave-flash"
data="[Link]" width="250" height="250">
</object>
This tag has the following attributes-
Attribute Description
type It defines URL of the resource.
data It defines the video controls which is displayed with play/pause buttons.
name It defines of the object.
width It defines the width of the object.
height It defines the height.
The <iframe> tag –
Here <iframe> tag specifies an inline frame and it is used to embed another document within
the current HTML document.
Syntax:
<iframe src="url" title="description"></iframe>
Example-
<iframe src="[Link]" title="iframe" height="250" width="250"
style="height:250px; width:350px;></iframe>
If you want to target…
Syntax:
<iframe src="webpage_url" title="description" name="frame_name"></iframe>
<p><a href="url" target="frame_name">Type here…</a></p>
Example-
<iframe src="[Link]" title="iframe" name=" iframe_a"></iframe>
<p><a href="[Link] target="iframe_a">[Link]</a></p>