ALL HTML SOLUTION HERE. (1 TO 57) AND ALSO YOU CHECK ON YT ALLTECHINFO NA
Created 4 years ago
5018
Views
2
Comments
@narendra7770
1. Display "Hello Everyone!!!" in a paragraph tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p>
Hello Everyone!!!
</p>
</body>
</html>
2. Display 'GUVI GEEK' in a h1 tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h1> GUVI GEEK </h1>
</body>
</html>
3. Display "Hello From Guvian" using a paragraph tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p>Hello From Guvian</p>
</body>
</html>
4. Display ''Hello from Guvian" in red colour in H1 tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h1 style="color:red;">
Hello from Guvian
</h1>
</body>
</html>
5. Display "Hello from guvian" with background colour. (red) in paragraph tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p style="background-color:red;">Hello from guvian</p>
</body>
</html>
6. Display a text "Hi, How are you?" in bold tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<b>Hi, How are you?</b>
</body>
</html>
7. Display an ordered list with coffee,milk,tea items.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ol>
<li>coffee</li>
<li>milk</li>
<li>tea </li>
</ol>
</body>
</html>
8. Display an unordered list as inline with elements HTML, CSS, JS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
9. Underline the given text "Cookies" using html tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<u>Cookies</u>
</body>
</html>
10. Display the text "GUVI GEEK" ranging from h1 to h6 tags in html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h1>GUVI GEEK</h1>
<h2>GUVI GEEK</h2>
<h3>GUVI GEEK</h3>
<h4>GUVI GEEK</h4>
<h5>GUVI GEEK</h5>
<h6>GUVI GEEK</h6>
</body>
</html>
11. Mark the word 'Google' in the given paragraph 'Google more to explore the things' use p tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p> <mark>Google</mark> more to explore the things</p>
</body>
</html>
12. Superscript the word 'Well' in the given paragraph 'All is Well'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p>All is <sup>Well</sup></p>
</body>
</html>
13. Subscript the word 'Hard' in the paragraph 'Work Hard'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p>Work<sub>Hard</sub></p>
</body>
</html>
14. Separate the given two paragraphs 'I am first' and 'I am second' with a line between them using a tag in html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p>I am first</p>
<hr>
<p>I am second</p>
</body>
</html>
15. Create a table of width 100% and table header's Firstname, Lastname, Age.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
</body>
</html>
16. Display "This is a paragraph" in a bold tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<b>This is a paragraph</b>
</body>
</html>
17. Display an ordered list with text ONE, TWO, and THREE as list elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ol>
<li>ONE</li>
<li>Two</li>
<li>Three</li>
</ol>
</body>
</html>
18. Display an ordered list with text ONE, TWO, and THREE as list elements and ordered with alphabet characters like a, b, c....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ol id="lists" type="a">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>
</body>
</html>
19. Display an ordered list with text ONE, TWO, and THREE as list elements and ordered with roman characters like I, II, III, IV, ....(use id as 'lists')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ol id='lists' type="I">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol></body>
</html>
20.
Display an ordered list with text ONE, TWO, and THREE as list elements and ordered with roman characters like i, ii, iii, iv.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ol id='lists' type="i">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>
</body>
</html>
21.
Display an unordered list with text ONE, TWO and THREE with list-style-type as "disc" using inline CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ul id='lists' style="list-style-type: disc;">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
22.
Display an unordered list with text ONE, TWO and THREE with list-style-type as "circle" using inline CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ul id='lists' style="list-style-type: circle;">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
23. Display an unordered list with text ONE, TWO and THREE with list-style-type as "square" using inline CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ul id='lists' style="list-style-type: square;">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
24. Display the given unordered list with text ONE, TWO and THREE without any list style using inline CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<ul id='lists'>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
25. Edit the given anchor tag to make the link open on new tab using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">Google</a>
</body>
</html>
26. Display "This is a italic paragraph" in a italic tag using HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<i>This is a italic paragraph</i>
</body>
</html>
27. Display "This is a underlined paragraph" with an underline using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<u>This is a underlined paragraph</u>
</body>
</html>
28. Display a Button showing "Click Me" using HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<button>Click Me</button>
</body>
</html>
29. Display "Hello from guvian" with 😀 emojis front and back in a h1 tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h1>😀 Hello from guvian😀</h1>
</body>
</html>
30. Display "Hello World!" by using a p tag which is already present with id 'demo' in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p id="demo"></p>
</body>
</html>
document.getElementById("demo").innerHTML = "Hello World!";
31. Display "Hello from Guvian" in red colour, aligned center using CSS selector in paragraph tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
<style>
p {
color:red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello from Guvian</p>
</body>
</html>
32.
Display "Hello from Guvian" in a margin of 20px with pink background in a paragraph tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
<style>
p {
margin:20px;
background:pink;
}
</style>
</head>
<body>
<p>Hello from Guvian</p>
</body>
</html>
33. Display an statement "Hello From Guvian!" in a h1 tag and underline it using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
<style>
h1{
text-decoration: underline;
}
</style>
</head>
<body>
<body>
<h1>
Hello From Guvian!
</h1>
</body>
</html>
34. Display "Hello from guvian" using padding on all four sides, 10px, with light blue background in a paragraph tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<style>
p{
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
background:lightblue;
}
</style>
<body>
<p>
Hello from guvian
</p>
</body>
</html>
35.
Create a Unordered list with a id "unorderList" and the elements (HTML, CSS, Javascript) in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h2>Unordered List</h2>
<ul id='unorderList'>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
36. Create a ordered list with a id "orderedList" and the elements (HTML, CSS, Javascript) in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h2>Ordered List</h2>
<ol id= "orderedList">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</body>
</html>
37. Align the given text "Code well" to center and give a green border to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p class="center">Code well</p>
</body>
</html>
p{
text-align:center;
border-color: green;
}
38. Draw a rectangle of width 200 and height 100 with a border of 1px black color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<canvas width="200" height="100" style="border:1px black solid">
</canvas>
</body>
</html>
39. Form a checkbox with options as I am an extrovert, I am an introvert, I am polite.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<form>
<input type="checkbox"><lable>I am an extrovert</lable>
<input type="checkbox"><lable>I am an extrovert</lable>
<input type="checkbox"><lable>I am an extrovert</lable>
</form>
</body>
</html>
40. Form radio buttons with values Male, Female, Other
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<form>
<input type="radio"><lable>Male</lable>
<input type="radio"><lable>Female</lable>
<input type="radio"><lable>Other</lable>
</form>
</body>
</html>
41. Create an iframe of width 300 and height 200 using iframe tag in html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<iframe widht="300" height= "200"></iframe>
</body>
</html>
42. Form a SVG stroke of width 600, height 80 of pink color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<svg height="80" width="600" stroke="pink">
</svg>
</body>
</html>
43. Display a link to 'www.google.com' with "Google" as text using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<a href="www.google.com">Google</a>
</body>
</html>
44. Display addition of 5 and 6 with a paragraph element with id name as "addition" using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<p id="addition"></p>
</body>
</html>
var number = document.getElementById("addition");
number.innerHTML = 5+6;
45. Display "Hello from Guvian" in a paragraph tag, where you have to increase the font size of the word 'Guvian' using class named 'note' to 20px in a span tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
<style>
.note{
font-size:20px;
}
</style>
</head>
<body>
<p>Hello from<span class="note"> Guvian</span></p>
</body>
</html>
46. Assign "Hello" to a string variable, 1 to a variable, print both in same line using Java Script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<p id="demo"></p>
<script>
var string = "Hello";
var number = 1;
document.getElementById("demo").innerHTML = string + number ;
</script>
</html>
47. Print the numbers from 1 to 5 using Javascript using for loop(give space between each number)).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<p id="demo"></p>
</html>
text="";
var i;
for (i = 1; i < 6; i++)
{
text += " " + i;
}
document.getElementById("demo").innerHTML = text;
48. Given an array, Print the elements which are greater than 5 in acending order from that numbers using javascript. if input is 45, 4, 9, 16, 25 Use ',' to separate numbers and Print use the fun() function to process !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body><input id='in1' oninput='fun()'><p id="result"></p>
</body></html>
49. Display "Hello From Guvian" using paragraph tag and by using :after pseudo element add ! after the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
<style>
p::after {
content: "!";
}
</style>
</head>
<body>
<p>Hello From Guvian</p>
</body>
</html>
50. Given a array, sort the array in Ascending order and print, using Javascript array=[40, 100, 1, 5, 25, 10]; Example(array=[5,4,3,2,1] sorted array 1,2,3,4,5 in p tag).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<p id="demo"></p>
</html>
var points = [40, 100, 1, 5, 25, 10];
points.sort((function(a, b){return a - b}));
document.getElementById("demo").innerHTML = points;
51. Create a input field with a label "Enter the name"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<form>
<input type="text">
<label>Enter the name</label>
</form>
</body>
</html>
52. Display "Hello From Guvian" in a paragraph and highlight the word "Hello" in italics using internal CSS via class name italic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<style>
.italic{
font:italic small-caps bold 12px/30px Georgia, serif;
}
</style>
<body>
<p><span class="italic">Hello</span> From Guvian</p>
</body>
</html>
53. Create a HTML form, With "FirstName" , "LastName" as id to input fields, with a "submit" button and a Heading tag "Guvi Form"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h2>Guvi Form</h2>
<form>
<label for="FirstName">FirstName</label>
<input type="text" id="FirstName" name="fname"><br><br>
<label for="LastName">LastName</label>
<input type="text" id="LastName" name="lname"><br><br>
<input type="button" onclick="formSubmit()" value="submit">
</form>
</body>
</html>
54. Create a HTML form, With "Firstname", "Password" as id for input fields, with a "submit" button and a Heading tag "Guvi Form", Password field should get only 4 characters as input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h2>Guvi Form</h2>
<form>
<label for="Firstname">FirstName</label>
<input type="text" id="Firstname" name="fname"><br><br>
<label for="Password">Password</label>
<input type="password" id="Password" name="password" maxlength="4">
<input type="button" onclick="formSubmit()" value="submit">
</form>
</body>
</html>
55. Include a image with id 'myImage' where the source is 'https://www.guvi.in/images/guvi-logo.png'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<img src="https://www.guvi.in/images/guvi-logo.png" id="myImage">
</body>
</html>
56. Draw a Circle with radius of 40 with blue colour, black colour stroke using SVG (Width =100 and height =100) x,y 50,50.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" /></svg>
</body>
</html>
57. Draw HTML canvas, cavas details, width="200" height="100" style is border:1px and solid #d3d3d3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</body>
</html>