1)Display a paragraph 'I am the tallest one in my class' in bold format with blue 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>
<p>
<font style="color: blue; "><b>'I am the tallest one in my class'</b></font> </font>
</p>
</body>
</html>
2)Highlight the word 'Attitude' with background color as green in the paragraph 'Attitude plays a major role in life of a person' and the whole paragraph text should be in bold format
<!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>
<b style="background-color: green;">'<mark>Attitude</mark> plays a major role in life of a person'</b>
</p>
</body>
</html>
4)Create an ordered list with identifiers as numerals and list items as Alex,Deeksha,Ray,Neha
<!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>Alex</li>
<li>Deeksha</li>
<li>Ray</li>
<li>Neha</li>
</ol>
</body>
</html>
5)Quote using double quotes the word scripting in the sentence "This can be defined as scripting"
<!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><q>"This can be defined as scripting"</q></p>
</body>
</html>
6)Create a textarea of row size as 3 and column width as 120 with content " Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book".
<!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>
<textarea rows="3" cols="120">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam possimus deleniti debitis excepturi minima id quaerat corporis obcaecati quas quis commodi consequuntur sapiente, suscipit, et illum explicabo. Consequatur sint laudantium tempora ut eaque nesciunt temporibus, saepe reprehenderit eligendi ipsa magni voluptates! Hic tempore dignissimos sapiente iste delectus? Voluptates mollitia quo blanditiis dolore nemo corrupti amet, quia totam voluptas sunt distinctio obcaecati laboriosam expedita corporis veritatis optio accusantium repudiandae! Asperiores ipsum reprehenderit impedit dolorem nulla. Tempora officia voluptatum sunt? Fuga quod sapiente nulla quasi libero, odio labore iste nemo hic corrupti inventore amet! Possimus obcaecati inventore cupiditate. Eius aperiam ad earum in esse numquam temporibus fuga voluptatibus odit voluptatem, doloremque obcaecati nihil eaque illo quod deleniti reiciendis eos placeat delectus inventore, quidem qui rerum officia laudantium. Sequi, non, error inventore eius tempora neque, nobis rerum quis dignissimos dolore illo aliquid doloribus! Dolorum itaque neque accusantium unde repellat repudiandae fuga tempore ducimus.</textarea>
</body>
</html>
7)Display largest heading "SkillSet" and skillset of a student with the help of progress bars whose attribute value (for and id must be of file) Java with 72%, Python with 95%, C with 63% and C++ with 43%
<!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>"Skillset"</h1>
<h3>skillset of a student</h3>
<label for="file">Java:</label>
<progress id ="file" value="72" max="100"> 72% </progress></br>
<label for="file">Python:</label>
<progress id="file" value="95" max="100"> 95% </progress></br>
<label for="file">C:</label>
<progress id="file" value="63" max="100"> 63% </progress></br>
<label for="file">C++:</label>
<progress id="file" value="43" max="100"> 43% </progress></br>
</body>
</html>
8)Display a text "All is Well" as the largest heading with horizontal and vertical shadow of 2px in red 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>
<style>
h1{
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1 style="color:red">"All is Well"</h1>
</body>
</html>
9)Display a text 'Welcome to Guvi' in bold format surrounded by a border of 3px width in green color.(use tag selectors)
<!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{border-width:3px;border:solid;}
</style>
</head>
<body>
<p><span style = "color:green"><b>'Welcome to Guvi'</b></span></p>
</body>
</html>
10)Display the given content using the div tag " Culture is the set of knowledge acquired over time. In this sense, multiculturalism values the peaceful coexistence and mutual respect between different cultures inhabiting the same planet. Sometimes "culture" is also used to describe specific practices within a subgroup of a society, a subculture or a counterculture". with an indent of 50px.
<!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>
div {
text-indent: 50px;
}
</style>
</head>
<body>
<div>" Culture is the set of knowledge acquired over time. In this sense, multiculturalism values the peaceful coexistence and mutual respect between different cultures inhabiting the same planet. Sometimes "culture" is also used to describe specific practices within a subgroup of a society, a subculture or a counterculture".
</div>
</body>
</html>
11)Display the words with a spacing of 1cm in the paragraph "Stitch in time saves in nine".
<!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 {
word-spacing: 1cm;
}
</style>
</head>
<body>
<P>"Stitch in time saves in nine"</P>
</body>
</html>
12)Subscript the word 'Honesty' in the paragraph "Honesty is the best Policy"
<!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>"Honesty is the best Policy" <sub>'Honesty'</sub></p>
</body>
</html>
13)Add font-family 'courier' to the given paragraph text "This is a paragraph"
<!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="font-family:'courier';"> "This is a paragraph"</p>
</body>
</html>
14)Given a paragraph "I am a quick grasper". Make the text "I am a' "as bold and "quick grasper" as 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>
<body>
<P><b> "I am a'</b><i>"quick grasper"</i></P>
</body>
</html>
15)Display a link "www.google.com" with href= 'www.google.com' and change the color of the link to red when it is visited, and change the color to green when it is moused over
<!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>
a.hover{
color:green;
}
</style>
</head>
<body>
<a style=color:red; href="www.google.com">"www.google.com"</a>
</body>
</html>
16)Display a button with value "Click Me!" and reduce its opacity to 0.5 when it is hovered
<!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>
button{
opacity: 0.5;
}
</style>
</head>
<body>
<button type="button">Click Me!</button>
</body>
</html>
17)Create an empty div element with a height of 200px and width of 50% with background color set to pink
<!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>
div {
height: 200px;
width: 50%;
background-color: pink
}
</style>
<body>
<div></div>
</body>
</html>
18)Align heading h1 with text "I am at right side of the page" at the right side of web page
<!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; text-align: right; "><hr>"All is Well"</hr></h1>
</body>
</html>
19)Underline the text "I am highlighted by underlining me"
<!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><u>"I am highlighted by underlining me"</u></p>
</body>
</html>
20)Rotate a paragraph by 160 degrees in the clockwise direction. The paragraph is "This div element is rotated clockwise 160 degrees." this paragraph should come after heading h1 with text 'Rotation'
<!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{
transform: rotateZ(160deg)
}
</style>
</head>
<body>
<h1>'Rotation'</h1>
<div>
<p>"This div element is rotated clockwise 160 degrees."</p>
</div>
</body>
</html>
21)Create a solid border around the text "The border-top-color can be specified with a color name". and top side of border should be colored with red using tag selectors
<!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>
<div>The border-top-color can be specified with a color name.</div>
</body>
</html>
22)Create a pagination denoted with page numbers from 1 to 7. using a tag .And also change the display property of the pagination to inline-block
<!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>
.pagination{
display:inline-block;
}
</style>
</head>
<body>
<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
</div>
</body>
</html>
23)Create a border of width 2px solid black around the text "I can be resized vertically" with a padding of 20px and give it an option to resize vertically when we drag the bottom right corner also add the overflow property to auto
<!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>
div{
border:2px solid;
overflow:auto;
padding:20px;
resize:vertical;
}
</style>
</head>
<body>
<div>I can be resized vertically</div>
</body>
</html>
24)Surround a text 'I am surrounded by a border' with a dotted border of 10px and space the border and text with 15px and set the background color of text to light blue
<!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>
<div id="example1">
I am surrounded by a border
</div>
</body>
</html>
25)Set the background color of a paragraph 'Rgba Values' using rgba values as 255,0,0,0.3
<!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="p1">Rgba Values</p>
</body>
</html>
26)Strike the whole context of paragraph "Honesty is the best Policy"
<!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><S>"Honesty is the best Policy"</S></P>
</body>
</html>
27)Create list items such as Coffee,Milk. List item Coffee should have description "Black hot drink'" and Milk should have description "White cold drink"
<!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>
<dl>
<dt>coffee</dt>
<dd> "Black hot drink'"</dd>
<dt>Milk</dt>
<dd>"White cold drink"</dd>
</dl>
</body>
</html>
28)Add font-family 'Arial' to the given paragraph text "This is a paragraph"
<!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="font-family: arial; "> "This is a paragraph"</p>
</body>
</html>
29)For the given code change the default property of elements(i.e from block level to inline viceversa)
<!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>
<span>
London is the capital city of England.
</span>
<span>
It is the most populous city in the United Kingdom
</span>
</body>
</html>
30)Change the below default property of elements to inline 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>
<div>
London is the capital city of England.
</div>
<div>
It is the most populous city in the United Kingdom
</div>
</body>
</html>
31)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>
32)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>
33)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>
34)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>
35)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>
36)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>
<P><b>Hi, How are you?</b></P>
</body>
</html>
37)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>milk</li>
</ol>
</body>
</html>
38)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>
39)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>
<p><u>Cookies</u></p>
</body>
</html>
40)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>
41)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>
42)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>
43)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>
44)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 an second</p>
</body>
</html>
45)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>
47)Superscript the word 'Honesty' in the paragraph "Honesty is the best Policy".
<!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><sup>Honesty</sup> is the best Policy</p>
</body>
</html>
48)Display a border with a border radius of 25px with 2px thick red color around the text "The border-radius property defines the radius of the element's corners".
<!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>
<div>
The border-radius property defines the radius of the element's corners
</div>
</body>
</html>
49)Given a paragraph "I am a quick grasper". Mark the above text as the 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>
<body>
<P><i>I am a quick graspe</i></P>
</body>
</html>
50)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>