1. Write HTML code to embed the following video in web document.

Suppose the video source is -
https://www.etutorialspoint.com/images/animation.webm

Solution

HTML5 provides video element to embed video in web page. Prior to HTML5, we are using third party plug-ins, like - Flash, Microsoft Silverlight, etc to play video on the browser. HTML5 provides a standard way to include video with several attributes which improve its default behavior.

This is the following HTML5 code to embed the given video -

<video width="400" height="350" poster="video/rabbit.jpg" controls>
<source src="video/animation.mp4" type="video/mp4" />
<source src="video/animation.webm" type="video/webm" />
<source src="video/animation.ogg" type="video/ogg" />	
Your browser does not support the embedded HTML5 video element.
</video>

Output of the above code

In the above code, width and height attributes specify the width and height of the video element, the poster frame is shown on a video frame until the user clicks the play button and the source attribute contains different types of video formats to support in different browsers and devices.



2. Write HTML code to place the following web page into your web page.


https://www.etutorialspoint.com

Solution

Iframe is used to embed an HTML document inside another HTML document on a website. It requires the start and end tags <iframe>..</iframe> and a target source attribute that specify the URL of a document to display in an iframe. We can also specify the size of the iframe using height and width attributes. Iframe also has other attributes, like scrolling, align, frameborder, vspace to enhance the appearance of iframe.

This is the following HTML5 code to place the iframe into a webpage.

<p>Embedding a web page using iframe</p>
<iframe src="https://www.etutorialspoint.com"  width="700" height="400">
</iframe>

Output of the above code

Embedding a web page using iframe



3. Draw a square using HTML5 SVG, fill that square with yellow color and make a 5px blue stroke width.

Solution

SVG stands for Scalable Vector Graphics. It is W3C recommended. The graphics in SVG are defined in XML format. It is an open standard that has been actively developed by the W3C. SVG generated graphics are vector based that require less storage space and image can be scaled up or down without the loss of quality. It is supported by all major browsers.

Each element of SVG is part of the DOM, it can be styled with CSS and add behavior with the SVG DOM.

This is the following HTML5 code to draw a square with 5px blue stroke width and filled with yellow color.

<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<rect
x="20" y="20"
width="100" height="100"
fill="yellow" stroke="blue"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>

Output of the above code -





4. Write HTML5 code to draw the given image using Canvas.


Solution

The HTML5 canvas element is used to draw graphics, animation, dynamic images, diagram, text to enhance the user experience. <canvas> tag is used to add canvas on the web page. It is pixel based and powered by Javascript. Canvas provides features to draw and manipulate images in any 2D and 3D context.

This is the following HTML5 code to draw the given image using Canvas.

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgba(255,0,0,0.3)";
ctx.fillRect (10, 10, 95, 90);
ctx.fillStyle = "rgba(0,255,0,0.3)";
ctx.fillRect (50, 50, 105, 100);
</script>
</body>
</html>

Output of the above code -

In the above code, getContext() is a method that returns an object for working on canvas. The fillStyle is a property of canvas and used to fill color gradient in the drawing and the fillRect method is used to draw a filled rectangle.



5. Draw an semi arc using HTML5 canvas.

Solution

HTML5 canvas element is used to draw graphics, animation, dynamic images, diagram, text to enhance the user experience. We can draw arcs on canvas using the arc() method.

Syntax of arc()

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Here, x and y are the coordinates of the circle's center, radius is the radius of circle, the startAngle and the endAngle parameters are for the start and end points of the arc in radians from the x axis. The anticlockwise parameter is a boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction.

Here is the HTML5 code to draw the semi arc using Canvas.


<!DOCTYPE HTML> 
<html> 
<head> 
<script>
window.onload = function()
{
canvas = document.getElementById("canvasArea");
context = canvas.getContext("2d");
drawArc ( 100, 25, 80, 0, 180, false, "#97C30A", "#FF717E");
function drawArc(xPos, yPos, radius, startAngle, endAngle,
anticlockwise, lineColor, fillColor)
{
var startAngle = startAngle * (Math.PI/180);
var endAngle = endAngle * (Math.PI/180);
var radius = radius;

context.strokeStyle = lineColor;
context.fillStyle = fillColor;
context.lineWidth = 8;
context.beginPath();
context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
context.fill();
context.stroke();
}
}
</script> 
</head> 
<body>
<div style = "width:240px; height:140px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "210" height = "130"
style = "border:2px solid black">
Your browser doesn’t currently support HTML5 Canvas.
</canvas> 
</div> 
</body> 
</html>

Output of the above code -

Your browser doesn't currently support HTML5 Canvas.


6. Write HTML code to embed the following audio in a document.


Suppose the audio source is -
http://www.etutorialspoint.com/images/papa_telefon.mp3

Solution

HTML5 provides audio element to embed audio in web page. Prior to HTML5, we are using third party plug-ins, like - Flash, Window Media Center, Apple iTunes, etc to play audio on the browser. The problem with these plug-ins are that, not all browsers or devices support it. HTML5 provides a standard way to include audio with several attributes which improve its default behavior.

This is the following HTML5 code to embed the given audio -

<audio controls="controls">
	<source src="audio/audio.mp3" type="audio/mpeg" />
	<source src="audio/audio.wav" type="audio/wav" />
	<source src="audio/audio.ogg" type="audio/ogg" />	
	Your browser does not support the embedded HTML5 audio element.
</audio>

Output of the above code

In the above code, controls specify audio control units like Play, Pause, Volume controls, the source contains different types of audio formats to support in different browsers and devices.



7. Write HTML code to draw an outlined rectangle using Canvas.

Solution

HTML5 provides strokeRect() method to draw outlines rectangle using canvas. This is a method of HTML <canvas> element.

Syntax of strokeRect()

context.strokeRect(x,y,width,height);

Here, x and y are the x and y axis coordinates of the rectangle respectively, width and height are used to set the width and the height of rectangle.

This is the following HTML5 code to draw the outlined rectangle using canvas.

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function()
{
canvas = document.getElementById("canvasArea");
context = canvas.getContext("2d");
var xPos = 20; var yPos = 20;
var width = 100; var height = 50;
context.strokeStyle = "red";
context.strokeRect (xPos+130, yPos, width, height);
}
</script>
</head>
<body>
<div style = "width:400px; height:90px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea"
width = "400" height = "90" style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas> 
</div>
</body>
</html>

Output of the above code

Your browser doesn't currently support HTML5 Canvas.

In the above code, getContext() method returns an object for working on canvas and strokeStyle property sets the color, gradient, or pattern used for strokes.





8. Write HTML code to draw a rectangle using Canvas and fill color in gradient from red to pink from start to end.

Solution

HTML5 provides addcolorstop() method to identify the colors and location in a gradient object. This is a method of HTML5 canvas element.

Syntax of addcolorstop()

gradient.addColorStop(stop,color);

Here, stop is a value between 0.0 and 1.0 that represents the position between start and end in a gradient and color is a color value to display at the stop position.

This is the following HTML5 code to draw a rectangle using canvas and fill color in gradient from red to pink from start to end.

<!DOCTYPE html>
<html>
<head>
	<title>addcolorstop() method</title>
</head>
<body>
<canvas id ="convasbx"
 width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser doesn't currently support HTML5 Canvas.
</canvas> 
<script>
	var c = document.getElementById("convasbx");
	var context= c.getContext("2d");
	var gradient= context.createLinearGradient(10,10,150,0);
	gradient.addColorStop(0, "red");
	gradient.addColorStop(1, "pink");
	context.fillStyle = gradient;
	context.fillRect(30, 20, 180, 100);
</script>
</body>
</html>

Output of the above code

In the above code, getContext() method returns an object for working on canvas, the fillStyle is a property of canvas and used to fill color gradient in the drawing and the fillRect() method is used to draw a filled rectangle.



9. Write the following mathematical expression by using HTML5 MathML.

a2 + b2 = c2

Solution

HTML5 MathML provides a way to write mathematics on the web page. All mathematical expression are written inside <math> tag. There are many child elements of the math element. Unfortunately, not all browsers support math element. So use the latest mozilla or chrome for render it.

<!DOCTYPE HTML> 
<html> 
<head> 
</head> 
<body>
	<math xmlns="http://www.w3.org/1998/Math/MathML">
	 <mrow>
		<msup><mi>a</mi><mn>2</mn></msup>
		<mo>+</mo>
		<msup><mi>b</mi><mn>2</mn></msup>
		<mo> = </mo>
		<msup><mi>c</mi><mn>2</mn></msup>
	 </mrow>
	</math>
</body> 
</html>

Output of the above code

a2 + b2 = c2

Here, mrow is horizontally group sub-expressions, msup is superscript, mi is identifier, mo is operator and mn is numeric literal.

10. Write code using HTML5 Canvas Composition to draw the following shape.


Solution

The globalCompositeOperation() is a property of HTML5 Canvas 2D API. This property defines how a source image are drawn over a destination image.

In the following code, we are using 'destination-over' composition property to draw the rectangle over the circle.

<!DOCTYPE HTML>
<html>
	<head>
	 <script>
        function drawComposition() {
		   var label = document.createTextNode('destination-over');
		   var ctx = document.getElementById('compo').getContext('2d');
		   //rectangle
		   ctx.fillStyle = "#00AAA0";
		   ctx.fillRect(15,15,70,70);
		   
		   //Set the composition property
		   ctx.globalCompositeOperation = 'destination-over';
		   
		   // circle
		   ctx.fillStyle = "#FF7A5A";
		   ctx.beginPath();
		   ctx.arc(75,75,35,0,Math.PI*2,true);
		   ctx.fill();
		}
	 </script>
	</head>
	<body onload="drawComposition();">
	<canvas id="compo" width="125" height="125"></canvas>
	</body>
</html>

Output of the above code -

In the above code, getContext method returns an object for working on canvas, the fillStyle is a property of canvas and used to fill color gradient in the drawing, the fillRect method is used to draw a filled rectangle, the arc() method creates an arc/curve.





11. Write the following text using HTML5 strokeText.

Solution

The strokeText() method draws text on the canvas. To set the stoke color of text, we can set by using stokeStyle property of canvas context to a color string.

<!DOCTYPE HTML>
<html>
	<head>
	 <script>
	  var canvas = document.getElementById('mycanvas');
	  var context = canvas.getContext('2d');
	  var x = 50;
	  var y = 90;
	  context.font = "50px Georgia";
	  context.lineWidth = 3;
	  context.strokeStyle = 'green';
	  context.strokeText('Good Morning!', x, y);
	 </script>
	</head>
	<body>
	  <canvas id="myCanvas" width="378" height="200"></canvas>
	</body>
</html>




12. Write HTML code to draw the following shape using canvas.


Your browser does not support the HTML5 canvas element.

Solution

HTML5 canvas element is used to draw graphics, animation, dynamic images, diagram, text to enhance the user experience. <canvas> tag is used to add canvas on the web page. It is pixel based and powered by Javascipt. The canvas area of the web page is accessed by javascript code.

The following code draw the given shape -

<!DOCTYPE HTML> 
<html> 
<head> 
	<script>
	window.onload = function()
	{
		var width = 70;  var space = 2;
		drawShape(5+(2*space)+(2*width), 120, "round");
		
		function drawShape(xStart, yStart, join)
		{
                var height = 85;
		canvas = document.getElementById("canvasreason");
		context = canvas.getContext("2d");
		context.strokeStyle = "blue"; 
		context.lineWidth = 25;
		context.shadowOffsetX = 4; 
		context.shadowOffsetY = 4;
		context.shadowBlur = 5; 
		context.shadowColor = "gray";
		context.lineCap = "round";
		context.beginPath();
		context.moveTo(xStart, yStart);
		context.lineTo(xStart+(width/2), yStart-height);
		context.lineTo(xStart+width, yStart);
		context.lineJoin = join;
		context.stroke();
		}
	}
	</script> 
</head> 
<body>
	<div style="width:500px; height:160px; margin:0 auto; padding:5px;">
	<canvas id = "canvasreason" width = "500" height = "160" >
	Your browser does not support the HTML5 canvas element.
	</canvas> 
	</div> 
</body> 
</html>

Here, the strokeStyle property sets the color, gradient, or pattern used for strokes, the shadowOffsetX property sets the horizontal distance of the shadow from the shape, the shadowOffsetY property sets the vertical distance of the shadow from the shape, the shadowBlur property specifies the level of the blurring effect, the shadowColor property sets the color to use for shadows.



HTML Related Articles

HTML5 Geolocation
HTML5 Drag and Drop
HTML5 Canvas
HTML5 MathML
HTML5 Video
HTML5 Audio
HTML Table Alternate Row Color
Program to find prime number
HTML open link in new tab
Simple Show Hide Menu Navigation
Complete HTML Form Validation
Image popup on page load using HTML
Display data from MySQL in HTML table
Dynamically Add/Delete HTML Table Rows


Read more articles


General Knowledge



Learn Popular Language