HTML & CSS TCS Xplore Solution all Hands on

HTML & CSS Hands on 1

<! DOCTYPE html>
<html>
<head>
<title>Question1</title>
</head>
<body>
<!-- Design & Develop your code here -->
<div style="background-color:red; color: white;" id="head" width="600"
height="200">
<h1>My Application</h1>
</div>
<div id="body" width="600px" height="400px">
<span style="background-color:#00FF00" id="span1" width="300px"
height="300px">
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.
</span>
<span id="span2" width="300px" height="300px" style="background-color:
#0000FF">
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.
</span>
</div>
</body>
</html>

 

HTML & CSS Hands on 2

<! DOCTYPE html>

<html>
<head>
<title>Question2</title>
</head>
<body>
<!-- Design & Develop your code here -->
<h1>Inventory Management System</h1>
<hr id="rule1" width="100%">
<p id="menu" style="text-align: center">
</p>
<a id="menu1" href="page1.html">Registration</a>
<a id="menu2" href="page2.html">List</a>
<a id="menu3" href="page3.html">Search</a>
<hr id="rule2" width="100%">
<footer>
<h4>&copy; My App 2019-20.</h4>
</footer>
</body>
</html

HTML & CSS Hands on 3

<!DOCTYPE html>
<html>
<head>
<title>Form For Adding Books</title>
<style>
button{
background-color:#2345E4;
}
</style>
</head>
<body>
<h2>Add Book</h2>
<form name="addBook">
Book Id
<input name="bookId" type="text">
Book Name
<input name="bookName" type="text">
Category
<select id="category">
<option value="Action">Action</option>
<option value="Drama">Drama</option>
<option value="Comedy">Comedy</option>
<option value="Children">Childrens</option>
</select>
<input type="radio" name="availability" value="available">Available
<input type="radio" name="availability" value="not available">Not Available
<button type="reset" name="cancel">Cancel</button>
<button type="submit" name="add">Add</button>
</form>
</body>
</html>

HTML & CSS Hands on 4

<! DOCTYPE html>

<html>
<head>
<title>Question4</title>
<style>
#button{
background-color:#2345E4;
}
</style>
</head>
<body>
<!-- Design & Develop your code here -->
<form id="registerCustomer">
<h1>Customer Registration</h1>
Customer Id
<input type="text" name="customerId" maxlength="6" required><br>
Customer Name
<input type="text" name="customerName" required><br>
City
<select id="city" required>
<option value="chennai">Chennai</option>
<option value="mumbai">Mumbai</option>
<option value="delhi">Delhi</option>
<option value="trivandrum">Trivandrum</option>
</select><br>
<label>Gender</label>
<input type="radio" name="gender" value="Male" required="required">Male
<input type="radio" name="gender" value="Female"
required="required">Female
<br>
<input id="button" type="submit" name="create" value="Create">
<input id="button" type="reset" name="cancel" value="Cancel">
</form>
</body>
</html>

HTML & CSS Hands on 5

<! DOCTYPE html>

<html>
<head>
<title>Question3</title>
<style>
#custList{
border: 1;
width: 80%;
align: center;
}
th{
backgroundcolor:#42aaf4;
}
</style>
</head>
<body>
<!-- Design & Develop your code here -->
<h2>Customer Listing</h2>
<table id="custList">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>Gender</th>
<th>City</th>
</tr>
<tr>
<td>100001</td>
<td>Akshay Kumar</td>
<td>Male</td>
<td>Chennai</td>
</tr>
<tr>
<td>100002</td>
<td>Shyama P</td>
<td>Female</td>
<td>Trivandrum</td>
</tr>
<tr>
<td>100003</td>
<td>Nalini Kumari</td>
<td>Female</td>
<td>Bangalore</td>
</tr>
<tr>
<td>100004</td>
<td>Raj Shyam</td>
<td>Male</td>
<td>Chennai</td>
</t>
<tr>
<td>100005</td>
<td>Sundar G</td>
<td>Male</td>
<td>Mangalore</td>
</tr>
</table>
</body>
</html>

HTML & CSS Hands on 6

<!DOCTYPE html>

<html>
<head>
<title>Question6</title>
<style>
table{
text-align: center;
}
th{
background-color:#45E078;
}
button{
background-color: #FF0000;
}
</style>
</head>
<body>
<!-- Design & Develop your code here -->
<h1 id="header">Uni Sales</h1>
<div id="body">
<h2>My Cart</h2>
<input type="text" name="customerId" maxlength="6" required<br>
Customer Name
<input type="text" name="customerName" required><br>
<input id="button" type="submit" name="create" value="Create">
<input id="button" type="reset" name="cancel" value="Cancel">
<table id="myCarts" width="80%">
<tr>
<th>Product Name</th>
<th>Description</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>Surf Excel
</td>
<td>Washing Powder
</td>
<td>85.00
</td>
<td>1
</td>
<td>85.00
</td>
</tr>
<tr>
<td>Harpic
</td>
<td>Toilet Cleaner
</td>
<td>48.00
</td>
<td>2
</td>
<td>96.00
</td>
</tr>
</table>
</div>
<button style="background-color:#FF0000" type="button"
id="continue">Continue</button>
<button style="background-color:#FF0000" type="submit"
id="checkout">Checkout</button>
</body>
</html>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top