Webkata Solutions from 1 to 10
1. Paragraph tag
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>
<style>
p{
color:blue;
}
</style>
</head>
<body>
<p ><b>I am the tallest one in my class</b></p>
</body>
</html>
2. Paragraph
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>
<style>
</style>
</head>
<body>
<div>
<p><b><mark style="background-color:green;">Attitude</mark> plays a major role in life of a person</b></p>
</div>
</body>
</html>
3. canvas
Display a rectangle using canvas of width 200 and height 100 with border color as black using id selector
<!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">
</canvas>
</body>
</html>
4. List
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 start=1>
<li> Alex</li>
<li> Deeksha</li>
<li> Ray</li>
<li>Neha</li>
</ol>
</body>
</html>
5. Quotes
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>This can be defined as <q>scripting</q></p>
</body>
</html>
6. textarea
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 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.
</textarea>
</body>
</html>
7. DropDownList
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>
<label for="java">Java</label>
<progress id="java" value="72" max="100"> 32% </progress><br>
<label for="python">Python</label>
<progress id="python" value="72" max="100"> 95% </progress><br>
<label for="C">C</label>
<progress id="C" value="72" max="100"> 63% </progress><br>
<label for="C++">C++</label>
<progress id="C++" value="72" max="100"> 43% </progress>
</body>
</html>
8.Heading
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 #ff0000;
}
</style>
</head>
<body>
<h1>All is Well</h1>
</body>
</html>
9. bold
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>
.para{
border:2px solid green;
}
</style>
</head>
<body>
<p class="para"><b>Welcome to Guvi</b></p>
</body>
</html>
10. text-indent
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 class="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>