Scribd
Upload
2K views

Temp

The document provides instructions to create a web application with formatted divs and spans. It instructs to create a header div with red background and center aligned text, and two side-by-side content spans with dummy text and different backgrounds. Sample HTML code is provided to display the formatted divs and spans as described in the instructions.

Uploaded by

Ruturaj Ghodake
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2K views

Temp

The document provides instructions to create a web application with formatted divs and spans. It instructs to create a header div with red background and center aligned text, and two side-by-side content spans with dummy text and different backgrounds. Sample HTML code is provided to display the formatted divs and spans as described in the instructions.

Uploaded by

Ruturaj Ghodake
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

3m 29s left

ALL
1
1. Xplore : UI : Format Div
#### Instruction

Create a web application which is used to display a formatted paragraph using <div>
tag as shown bellow.

1) Create a div (<div id="head">) with width=600pixel, height=200pixel, background


colour=Red, foreground colour=white.

2) Display a header in <h1> tag with a message as "My Application" and need to be
aligned to center.

3) Create another div (<div id="body">) with width=600pixel, height=400pixel.

4) Create two spans horizontally fit into the div.

5) The first span should have id=span1, width=300pixel, height=300pixel,


background colour=#00FF00.

6) The span should contain a text as shown below;

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

7) The second span should have id=span2, width=300pixel, height=300pixel,


background colour=#0000FF.

8) The span should contain a text as shown below;

"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."
Git Instructions
Use the following commands to work with this project

Run
Copy

npm start

Test
Copy

npm test

Install
Copy

npm install

Instructions
Web IDE

Test Results
Help

Run Tests

Submit Code

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

You might also like