Web Assignment

WACHAMO UNVERSITY DURAME CANPUS
Collage of Engineering and Technology

Department of Computer Science
COURSE TITLE=WEB PROGRAMMING
COURSE CODE=CoSc
SUBMIT TO= MRS LIDAY T
NAME = TESHOME ENDALE
IN NUMBER= 2126
 Title: Multimedia, HTML Graphics, and HTML Frames
 Table of Contents:
1. Introduction
2. Inserting Multimedia in HTML
2.1 Using the <embed> Tag
2.2 Using the <audio> Tag
2.3 Using the <video> Tag
3. HTML Graphics
3.1 HTML Canvas
3.1.1 Syntax and Usage
3.1.2 Example
3.2 SVG (Scalable Vector Graphics)
3.2.1 Syntax and Usage
3.2.2 Example
4. HTML Frames
4.1 Creating an HTML Frame
4.2 Frame Set
4.3 Internal Frame
4.4 Examples
5. Conclusion
6. References
1. Introduction:
HTML (Hypertext Markup Language) is a standard markup language used for creating web pages. In this
short note, we will explore three important aspects of HTML: inserting multimedia, HTML graphics using
HTML Canvas and SVG, and creating HTML frames. We will delve into the syntax, usage, and provide
examples for each concept.
2. Inserting Multimedia in HTML:
Multimedia elements such as images, audio, and video enhance the user experience on web pages.
HTML provides several tags to embed multimedia content. The <embed>, <audio>, and <video> tags are
commonly used for this purpose.
2.1 Using the <embed> Tag:
The <embed> tag allows you to embed multimedia content directly into an HTML page. It supports
various multimedia types such as images, audio, video, and flash. Here is an example of using the
<embed> tag to insert an image:
Example of Embedded
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>Embedding an Image</h1>
<embed src="image.jpg" width="300" height="200">
</body>
</html>
Example 2: Embedding a Flash Animation:
<!DOCTYPE html>
<html>
<head>
<title>Flash Animation Example</title>

</head>
<body>
<h1>Embedding a Flash Animation</h1>
<embed src="animation.swf" width="400" height="300">
</body>
</html>
2.2 Using the <audio> Tag:

The <audio> tag is specifically designed for embedding audio content in HTML. It supports multiple
audio formats such as MP3, WAV, and OGG. Here is an example of using the <audio> tag to insert an
audio file:
Example 1: Embedding an Audio File:
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h1>Including Audio</h1>
<audio src="audio.mp3" controls></audio>
</body>
</html>
Example 2: Adding Audio Controls:
<!DOCTYPE html>
<html>
<head>
<title>Audio Example with Controls</title>
</head>
<body>
<h1>Including Audio with Controls</h1>
<audio src="audio.mp3" controls>
Your browser does not support the audio element.
</audio>
</body>
</html>
2.3 Using the <video> Tag:
The <video> tag is used to embed videos in HTML pages. It supports various video formats such as MP4,
WebM, and OGG. Here is an example of using the <video> tag to insert a video:
Example 1: Embedding a Video File:
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h1>Embedding a Video</h1>
<video src="video.mp4" width="640" height="360" controls></video>

</body>
</html>
Example 2: Customizing Video Controls:
<!DOCTYPE html>
<html>
<head>
<title>Customized Video Example</title>
</head>
<body>
<h1>Customizing Video Controls</h1>
<video src="video.mp4" width="640" height="360" controls autoplay loop poster="poster.jpg">
Your browser does not support the video element.
</video>
</body>
</html>
3. HTML Graphics:
HTML provides powerful tools for creating graphics within web pages. The two main approaches are
HTML Canvas and SVG (Scalable Vector Graphics).
3.1 HTML Canvas:
HTML Canvas provides a drawing surface for JavaScript-based graphics and animations. It allows you to
draw shapes, paths, text, and images dynamically. Here is the syntax for using HTML Canvas:
```html
<canvas id="myCanvas" width="400" height="200"></canvas>
```
Example 1: Drawing a Rectangle on Canvas:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body>
<h1>Canvas Example</h1>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
Example 2: Drawing a Circle on Canvas:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body>
<h1>Canvas Example</h1>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
</script>
</body>
</html>
3.2 SVG (Scalable Vector Graphics):
SVG is an XML-based language for creating vector graphics. It allows you to define shapes, text, and
images using XML tags. SVG graphics are scalable and can be resized without losing quality. Here is the
syntax for using SVG:
```html
<svg width="400" height="200">
<rect x="50" y="50" width="200" height="100" fill="blue" />
</svg>
```
Example 1: Drawing a Rectangle with SVG:
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<h1>SVG Example</h1>
<rect x="50" y="50" width="100" height="100" fill="red" />
</svg>
</body>
</html>
Example 2: Drawing a Circle with SVG:
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<h1>SVG Example</h1>
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
</body>
</html>
4. HTML Frames:
HTML frames allow you to divide a web page into multiple sections, each displaying a different HTML
document. The main components of HTML frames are the frame set, frames, and internal frame.
4.1 Creating an HTML Frame:
To create an HTML frame, you need to use the <frame> tag within a <frameset> tag. The <frame> tag
specifies the content to be displayed withinthe frame. Here is an example of creating a frame:
```html
<frameset cols="25%, 75%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
4.2 Frame Set:
The frame set defines the layout and structure of frames within a web page. It specifies the size,
position, and number of frames in a frameset. In the example above, we have defined a frameset with
two columns, where the first column occupies 25% of the width and the second column occupies 75% of
the width.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "5%,20%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
4.3 Internal Frame:
An internal frame is a frame that is embedded within another frame. It allows for nesting frames within
frames. Here is an example of using an internal frame
<HTML>
<HEAD>
<TITLE>Frame Example</TITLE>
</HEAD>
<title>internal Frame Example </title>
</head>
<body>
<h1> main page</h1>
<iframe src ="content.html" name="content" wsidth="200" height="150">
</iframe>
<p> some text below the internal frame.</p>
</body>
</html>

Web Assignment

Uploaded by

Copyright:

Available Formats

Web Assignment

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Assignment

Uploaded by

Copyright:

Available Formats

WACHAMO UNVERSITY DURAME CANPUS

Collage of Engineering and Technology

COURSE TITLE=WEB PROGRAMMING

SUBMIT TO= MRS LIDAY T

NAME = TESHOME ENDALE

2. Inserting Multimedia in HTML

2.1 Using the <embed> Tag

2.2 Using the <audio> Tag

2.3 Using the <video> Tag

3.1 HTML Canvas

3.1.1 Syntax and Usage

3.2 SVG (Scalable Vector Graphics)

3.2.1 Syntax and Usage

4.1 Creating an HTML Frame

4.2 Frame Set

4.3 Internal Frame

2.1 Using the <embed> Tag:

<embed src="image.jpg" width="300" height="200">

Example 2: Embedding a Flash Animation:

<title>Flash Animation Example</title>

<h1>Embedding a Flash Animation</h1>

<embed src="animation.swf" width="400" height="300">

2.2 Using the <audio> Tag:

Example 1: Embedding an Audio File:

<audio src="audio.mp3" controls></audio>

<title>Audio Example with Controls</title>

<h1>Including Audio with Controls</h1>

<audio src="audio.mp3" controls>

Your browser does not support the audio element.

2.3 Using the <video> Tag:

Example 1: Embedding a Video File:

<video src="video.mp4" width="640" height="360" controls></video>

Example 2: Customizing Video Controls:

<title>Customized Video Example</title>

<h1>Customizing Video Controls</h1>

<video src="video.mp4" width="640" height="360" controls autoplay loop poster="poster.jpg">

Your browser does not support the video element.

3.1 HTML Canvas:

<canvas id="myCanvas" width="400" height="200"></canvas>

Example 1: Drawing a Rectangle on Canvas:

canvas { border: 1px solid black; }

<canvas id="myCanvas" width="200" height="200"></canvas>

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.fillRect(50, 50, 100, 100);

Example 2: Drawing a Circle on Canvas:

canvas { border: 1px solid black; }

<canvas id="myCanvas" width="200" height="200"></canvas>

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.arc(100, 100, 50, 0, 2 * Math.PI);

<svg width="400" height="200">

<rect x="50" y="50" width="200" height="100" fill="blue" />

Example 1: Drawing a Rectangle with SVG:

<svg width="200" height="200">

<rect x="50" y="50" width="100" height="100" fill="red" />

Example 2: Drawing a Circle with SVG:

<svg width="200" height="200">

<circle cx="100" cy="100" r="50" fill="blue" />