CSS Hands On

HTML5 & CSS3 HANDS-ON ANSWERS
1.HANDS-ON
<html>
<head>
<title>Question1</title>
<style>
#head
width: 600px;
height: 200px;
background-color: red;
color: white;
h1
text-align: center;
#div2
width: 600px;
height: 400px;
#span1
{
width: 300px;
height: 300px;
#span2
width: 300px;
height: 300px;
</style>
<body>

<div id="head"><h1>My Application</h1></div>
<div id="div2">
<span id="span1" style="background-color:#00ff00">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" 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>
2. HTML5 & CSS3 HANDS-ON:

Instruction
 Create a web application which will display a Home page with different menu items.
The application has following characterstics;
1) There should be header for the application in h1 Inventory Management System.
2) In next line, it need to display a hr with id="rule1" anf width as 100%.
3) Create a p tag with id="menu" and align to center.
4) Create an anchor tag with id="menu1" and href="page1.html" and value as "Registration".
5) In the next line, create an anchor tag with id="menu2" and href="page2.html" and value as
"List".
6) In the next line, create an anchor tag with id="menu3" and href="page3.html" and value as
"Search".
7) In next line, it need to display a hr with id="rule2" anf width as 100%.
8) Display a footer for the application as "(c) My App 2018-19." in h4.
 Use cd menus command to move into application folder.

 Use npm install to install the required packages.
 Use npm start to launch the application.
For web preview click the below link. https://2886795296-8000-

xplore01.environments.katacoda.com/
To test your application Use npm test command.
Click Summary button to verify the test results.
ANSWER
<html>
<head>
</head>
<body>
<header><h1>Inventory Management System</h1></header>
<hr id="rule1" style="width:100%"></hr>
<p id="menu" style="text-align:center">
<a id="menu1" href="page1.html">Registration</a>
<a id="menu2" href="page2.html">List</a>
<a id="menu3" href="page3.html">Search</a>
</p>
<hr id="rule2" style="width:100%"></hr>
<footer><h4>my app 2018-19.</h4></footer>
</body>
</html>
3. LIST CUSTOMERS IN A TABULAR FORMAT

Instruction
 Create a web application which will display a Home page with different menu items.
1) The Customer Listing screen should display list of customers in table format.
2) The table should have id="custList" and the following characterstics

{border=1;width=80%;align=center}.
3) Display the following customer list in the table.
Customer Id Name Gender City
100001 Akshay Kumar Male Chennai
100002 Shyama P Female Trivandrum
100003 Nalini Kumari Female Bangalore
100004 Raj Shyam Male Chennai
100005 Sundar G Male Mangalore
100006 Kishore P Male Calicut
4) The table header should have a back-ground colour of #42aaf4.

Note:
All the styles need to be implemented using inline.
 Use cd tables command to move into application folder.


ANSWER
<html>
<head>
</head>
<body>
<h2>customer listing</h2>
<table id="custList" style="border:1px; width:80%; text-align:center">
<tr style="background-color:#42AAF4">
<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>
</tr>
<tr>
<td>100005</td>
<td>Sundar G</td>
<td>Male</td>
<td>Mangalore</td>
</tr>
<tr>
<td>100006</td>
<td>Kishore P</td>
<td>Male</td>
<td>Calicut</td>
</tr>

</body>
</html>
4. FORM FOR ADDING BOOKS

Instruction
 Create a web application which is used to add a book to the library.
1) The Add Book form consist of following attributes.
Label Control
Book Id Text Box
Book Name Text Box
Category Dropdown Box
Available Radio Button
Add Submit
Cancel Reset
2) There is a form header as "Add Book" in h2
3) Create a text box for reading the value for Book Id, the text box name should be "bookId".
4) Create a text box for reading the value for Book Name, the text box name should be
"bookName".
5) The Category drop down consist of following values [ Action, Drama, Comedy, Childrens ]
with id as "category".
6) The radio button have following value [ Available, Not Available ] with name as
"availability".
7) Upon clicking the [Cancel] button the contents in the form need to be reset. The Cancel button
should be named as "cancel".
8) The Add button should be named as "add".
9) Both the buttons (Add as well as Cancel) should have the background color as #2345E4.
10) The form should have the name as "addBook".
 Use cd basicform command to move into application folder.


ANSWER
<html>
<head>
<body>
<h2>Add Book</h2>
<form name="addBook">
Book Id<input type="text" name="bookId"></br>
Book Name<input type="text" name="bookName"></br>
Category<select id="category">
<option value="Action">Action</option>
<option value="Drama">Drama</option>
<option value="Comedy">Comedy</option>
<option value="Childrens">Childrens</option></select></br>
Available<input type="radio" name="availability">Available<input type="radio"
name="availability">Not Available</br>
<input type="reset" name="reset" placeholder="cancel" style="Background-color: #2345E4">
<input type="submit" name="submit" placeholder="add" style="Background-color: #2345E4">
</body> </html>
5. CUSTOMER REGISTRATION WITH VALIDATION
Instruction
 The Customer Registration form with following attributes and its validations.
1) The Add Book form consist of following attributes.
Label Control
Customer Id Text Box
Customer Name Text Box
City Dropdown Box
Gender Radio Button
Create Submit
Cancel Reset
2) There should be header for the form in h1 ie; Customer Registration.
3) The form should have the name='registerCustomer' and id='registerCustomer'.
4) Create a text box for reading the value for Customer Id, the text box name should be
"customerId".
5) Create a text box for reading the value for Customer Name, the text box name should be
"customerName".
6) The City drop down consist of following values [ Chennai, Mumbai, Delhi, Trivandrum ] with
id as "city".
7) The Gender radio button have following value [ Male, Female ] with name as "gender".
8) Upon clicking the [Cancel] button the contents in the form need to be reset. The Cancel button
should be named as "cancel".
9) The Create button should be named as "create".
10) Both the buttons (Add as well as Cancel) should have the background color as #2345E4.
NB: Don't use javascript validation, instead use the built in form level validations.
 Use cd formvalidation command to move into application folder.


ANSWER
<html>
<head>
<body>
<h1>Customer Registration</h1>
<form name="registerCustomer" id="registerCustomer">
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>
Gender<input type="radio" name="gender" required>Male<input type="radio"
name="gender">Female</br>
<input type="reset" name="reset" placeholder="cancel" style="Background-color: #2345E4">
<input type="submit" name="submit" placeholder="create" style="Background-color: #2345E4">
</body>
</html>
6. CUSTOMER CART
Instruction
 Create a web application which will display the cart of the customer.
1. There should be header for the application in h1 ie; 'Uni Sales'. This need to be
implemented in a div with id="header"
2. All the cart details need to be displayed in another div with id="body".
3. The cart should have a header called "My Cart" in h2
4. The cart consist of two products which is already added.
5. It will show the Product Name, Description, Unit Price, Quantity and Total in the cart (in
a table).
6. The table should have an id="myCarts" and following attributes; align=center,
width=80%.
7. The header details of the table should have background color = #45E078.
Product Name Description Unit Price Quantity Total
Surf Excel Washing Powder 85.00 1 85.00
Harpic Toilet Cleaner 48.00 2 96.00
[Continue Shopping] [Checkout]
1. It will also provide two button "Continue Shopping" (id='continue') and "Checkout"
(id='checkout'). Both the buttons should have back ground color=#FF0000.
2. There should be a footer for the Mycart as "(c) All rights reserved to Uni Sales 2018-19."
in h4. The footer section need to be displayed in div with id="footer".
 Use cd layouts command to move into application folder.



ANSWER
<html>
<head>
<body>
<div id="header">
<h1>Uni Sales</h1>
</div>
<div id="body">
<h2>My Cart</h2>
<table id="myCarts" style="width:80%; text-align:center">
<tr style="background-color:#45E078">
<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>
<input type="submit" name="submit" id="continue" placeholder="Continue Shopping"
style="Background-color:#FF0000">
<input type="submit" name="submit" id="checkout" placeholder="Checkout" style="Background-
color:#FF0000">
</div>
<div id="footer">
<h4>(c) All rights reserved to Uni Sales 2018-19.</h4>
</div>
</body>
</html>

CSS Hands On

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Hands On

Uploaded by

Copyright:

Available Formats

HTML5 & CSS3 HANDS-ON ANSWERS

<div id="head"><h1>My Application</h1></div>

<span id="span1" style="background-color:#00ff00">Lorem Ipsum is simply dummy text of the printing

<span id="span2" style="background-color:#0000ff">Lorem Ipsum is simply dummy text of the printing

2. HTML5 & CSS3 HANDS-ON:

The application has following characterstics;

1) There should be header for the application in h1 Inventory Management System.

2) In next line, it need to display a hr with id="rule1" anf width as 100%.

3) Create a p tag with id="menu" and align to center.

7) In next line, it need to display a hr with id="rule2" anf width as 100%.

8) Display a footer for the application as "(c) My App 2018-19." in h4.

 Use cd menus command to move into application folder.

For web preview click the below link. https://2886795296-8000-

To test your application Use npm test command.

Click Summary button to verify the test results.

3. LIST CUSTOMERS IN A TABULAR FORMAT

The application has following characterstics;

2) The table should have id="custList" and the following characterstics

3) Display the following customer list in the table.

Customer Id Name Gender City

100001 Akshay Kumar Male Chennai

100002 Shyama P Female Trivandrum

100003 Nalini Kumari Female Bangalore

100004 Raj Shyam Male Chennai

100005 Sundar G Male Mangalore

100006 Kishore P Male Calicut

4) The table header should have a back-ground colour of #42aaf4.

All the styles need to be implemented using inline.

 Use cd tables command to move into application folder.

For web preview click the below link. https://2886795280-8000-

To test your application Use npm test command.

Click Summary button to verify the test results.

4. FORM FOR ADDING BOOKS

 Create a web application which is used to add a book to the library.

The application has following characterstics;

1) The Add Book form consist of following attributes.

Book Id Text Box

Book Name Text Box

Category Dropdown Box

Available Radio Button

2) There is a form header as "Add Book" in h2

10) The form should have the name as "addBook".

 Use cd basicform command to move into application folder.

For web preview click the below link. https://2886795417-8000-

To test your application Use npm test command.

Click Summary button to verify the test results.

The application has following characterstics;

1) The Add Book form consist of following attributes.

Customer Id Text Box

Customer Name Text Box

City Dropdown Box

Gender Radio Button

2) There should be header for the form in h1 ie; Customer Registration.

3) The form should have the name='registerCustomer' and id='registerCustomer'.

9) The Create button should be named as "create".

 Use cd formvalidation command to move into application folder.

For web preview click the below link. https://2886795276-8000-

To test your application Use npm test command.

Click Summary button to verify the test results.

The application has following characterstics;

Product Name Description Unit Price Quantity Total

Surf Excel Washing Powder 85.00 1 85.00

Harpic Toilet Cleaner 48.00 2 96.00