51)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>
52)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>
53)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>
54)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 type="i">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>
</body>
</body>
</html>
55)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 TYPE="disc">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
56)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 type="circle">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
57)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 type="square">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
58)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>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
</body>
</html>
59)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>
60)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>
61)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>
62)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 type="button">Click Me</button>
</body>
</html>
63)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>
64)Display "Hello World!" by using a p tag which is already present with id 'demo' in JavaScript
document.getElementById("demo").innerHTML="Hello World!"
65)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 {
text-align:center;
color:red;
}
</style>
</head>
<body>
<p>Hello from Guvian</p>
</body>
</html>
66)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 {
background-color:pink;
margin:20px;
}
</style>
</head>
<body>
<p>Hello from Guvian</p>
</body>
</html>
67)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>
<h1>Hello From Guvian!</h1>
</body>
</html>
68)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>
<style>
p{
padding:10px;
background:lightblue;
}
</style>
</head>
<body>
<p>Hello from guvian</p>
</body>
</html>
69)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'>
Syntax for creating unordered list
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
70)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">
Syntax for creating ordered list
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</body>
</html>
71)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>
73)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><br>
<input type="checkbox"><lable>I am an introvert</lable><br>
<input type="checkbox"><lable>I am polite</lable>
</form>
</body>
</html>
74)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><br>
<input type="radio">
<lable>Female</lable><br>
<input type="radio">
<lable>Other</lable>
</form>
</body>
</html>
75)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 width="300" height="200">
</iframe>
</body>
</html>
76)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>
77)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>
78)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>
79)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>
<span>
<p class="note">Hello from Guvian</p>
</span>
</body>
</html>
80)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>
</script>
</html>
81)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>
82)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>
83)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>
84)Set the font of the paragraph "I love ice-cream" to small-caps
<!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="small">I love ice-cream</p>
</body>
</html>
85)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>
86)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>
<label>Enter the name</label>
<input type="name">
</form>
</body>
</html>
87)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>
<style>
.italic{
font:italic small-caps bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<p><span class="italic">Hello</span> From Guvian</p>
</body>
</html>
88)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>
89)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>
<lable for="Firstname">Firstname</lable>
<input type="text" id="Firstname" name="fname"><br><br>
<lable for="Password">Password</lable>
<input type="password" id="Password" name="password" maxlength="4"><br><br>
<input type="button" onClick="forSubmit()" value="submit">
</form>
</body>
</html>
90)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>
91)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>
</svg>
</body>
</html>
92)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 width="200" height="100" style="border:1px solid #d3d3d3;">
</body>
</html>