Scribd
Upload
10K views

CSS Hands On

The documents provide instructions for creating HTML and CSS code to display various web elements. The first document describes creating a web page with a header, two side-by-side boxes containing text, and a footer. The second document describes creating a home page with menu links for different pages using HTML tags and CSS styles. The third document describes displaying a table of customer data by listing customer details in rows and specifying styles like colors for the header and body. The fourth document describes creating a form to add books with fields for ID, name, category, availability, and submit/reset buttons. The fifth document describes a customer registration form with validation, including fields for ID, name, city

Uploaded by

monisaanth t r
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10K views

CSS Hands On

The documents provide instructions for creating HTML and CSS code to display various web elements. The first document describes creating a web page with a header, two side-by-side boxes containing text, and a footer. The second document describes creating a home page with menu links for different pages using HTML tags and CSS styles. The third document describes displaying a table of customer data by listing customer details in rows and specifying styles like colors for the header and body. The fourth document describes creating a form to add books with fields for ID, name, category, availability, and submit/reset buttons. The fifth document describes a customer registration form with validation, including fields for ID, name, city

Uploaded by

monisaanth t r
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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>

<!-- Design & Develop your code here -->

<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>
<title>Question2</title>
</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.

The application has following characterstics;

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.


 Use npm install to install the required packages.
 Use npm start to launch the application.

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


xplore01.environments.katacoda.com/

To test your application Use npm test command.

Click Summary button to verify the test results.

ANSWER
<html>
<head>
<title>Question3</title>
</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>
<!-- Design & Develop your code here -->
</body>
</html>

4. FORM FOR ADDING BOOKS


Instruction

 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.

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.


 Use npm install to install the required packages.
 Use npm start to launch the application.

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


xplore02.environments.katacoda.com/

To test your application Use npm test command.

Click Summary button to verify the test results.

ANSWER
<html>
<head>
<title>Question4</title>
<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.

The application has following characterstics;

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.


 Use npm install to install the required packages.
 Use npm start to launch the application.

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


xplore01.environments.katacoda.com/

To test your application Use npm test command.

Click Summary button to verify the test results.

ANSWER
<html>
<head>
<title>Question5</title>
<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.

The application has following characterstics;

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.


 Use npm install to install the required packages.
 Use npm start to launch the application.

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


xplore04.environments.katacoda.com/

To test your application Use npm test command.

Click Summary button to verify the test results.


ANSWER
<html>
<head>
<title>Question6</title>
<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>

You might also like