Webkata HTML Codes 1-50
Webkata HTML Codes 1-50
color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<p>
</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">
</head>
<body>
<p>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<title>Static Template</title>
</head>
<body>
</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">
<title>Static Template</title>
</head>
<body>
</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">
<title>Static Template</title>
</head>
<body>
<h1>"Skillset"</h1>
<h3>skillset of a student</h3>
<label for="file">Java:</label>
<label for="file">Python:</label>
<label for="file">C:</label>
<label for="file">C++:</label>
</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">
<title>Static Template</title>
<style>
h1{
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
<style>
p{border-width:3px;border:solid;}
</style>
</head>
<body>
</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">
<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">
<title>Static Template</title>
<style>
p{
word-spacing: 1cm;
</style>
</head>
<body>
</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">
<title>Static Template</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<title>Static Template</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
<style>
a.hover{
color:green;
</style>
</head>
<body>
</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">
<title>Static Template</title>
<style>
button{
opacity: 0.5;
}
</style>
</head>
<body>
</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">
<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">
<title>Static Template</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
<style>
p{
transform: rotateZ(160deg)
</style>
</head>
<body>
<h1>'Rotation'</h1>
<div>
</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">
<title>Static Template</title>
</head>
<body>
</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">
<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">
<title>Static Template</title>
<style>
div{
border:2px solid;
overflow:auto;
padding:20px;
resize:vertical;
</style>
</head>
<body>
</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">
<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">
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
</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">
<title>Static Template</title>
</head>
<body>
<dl>
<dt>coffee</dt>
<dt>Milk</dt>
</dl>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
</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">
<title>Static Template</title>
</head>
<body>
<span>
</span>
<span>
</span>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<div>
</div>
<div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<p>Hello Everyone!!!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<h1>GUVI GEEK</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
</body>
</html>
35)Display "Hello from guvian" with background colour. (red) in paragraph tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<P><b>Hi, How are you?</b></P>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<ol>
<li>coffee</li>
<li>milk</li>
<li>milk</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<p><u>Cookies</u></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<title>Static Template</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<p>All is <sup>Well</sup></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<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">
<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">
<title>Static Template</title>
</head>
<body>
</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">
<title>Static Template</title>
</head>
<body>
<div>
</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">
<title>Static Template</title>
</head>
<body>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Template</title>
</head>
<body>
<b>This is a paragraph</b>
</body>
</html>