HTML Tags used in Images
HTML Tags used in Images
Welcome friends, Here we describe HTML tags which are used to put images in HTML files.
1. <img> :- <img> tag is used to put image in HTML tags. It requires to attributes :- alt and src. In html, image is not inserted directly while image insert in address form.
<img src="xyz.jpg" alt="XYZ Club" height="200px" width="200px">
2. <canvas> :- Canvas is used to draw graphics and put shapes of different types. A Place where we draw shapes for drawing is called canvas.
<canvas id="myCanvas"></canvas>
<script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 80);
</script>
3. <svg> :- svg defines a container for drawing several methods like boxes, paths, circles, text etc.
Lets' Example and enjoy the output:-
<html>
<head>
<title>Hyper Text Markup Language</title>
</head>
<body>
<img src="xyz.jpg" alt="XYZ Club" height="200px" width="200px">
<canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById ("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 80); </script>
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke- width="4" fill="yellow" /> </svg>
</body>
</html>
Welcome friends, Here we describe HTML tags which are used to put images in HTML files.
1. <img> :- <img> tag is used to put image in HTML tags. It requires to attributes :- alt and src. In html, image is not inserted directly while image insert in address form.
<img src="xyz.jpg" alt="XYZ Club" height="200px" width="200px">
2. <canvas> :- Canvas is used to draw graphics and put shapes of different types. A Place where we draw shapes for drawing is called canvas.
<canvas id="myCanvas"></canvas>
<script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 80);
</script>
3. <svg> :- svg defines a container for drawing several methods like boxes, paths, circles, text etc.
Lets' Example and enjoy the output:-
<html>
<head>
<title>Hyper Text Markup Language</title>
</head>
<body>
<img src="xyz.jpg" alt="XYZ Club" height="200px" width="200px">
<canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById ("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 80); </script>
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke- width="4" fill="yellow" /> </svg>
</body>
</html>
Comments
Post a Comment