Scribd
Upload
49 views40 pages

Web Termwork

Uploaded by

krn.rna.2003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
49 views40 pages

Web Termwork

Uploaded by

krn.rna.2003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 40

Karan Rana BCA-4th Sem, Sec-A Roll-No-42

Q1. A Program to illustrate Order List and Unordered List in a proper way

ORDER LIST
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ol type="I">
<li> UG course
<ol type="i">
<li>BCA</li>
<li>B.Sc It</li>
<li>B.Sc CS</li>
</ol>
</li>
<li> PG Course
<ol type="i">
<li>MCA</li>
<li>MSC It</li>
</ol>
</li>
</ol>
</body>
</html>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

UNORDER LIST

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul type="disc">
<li> UG course
<ul type="circle">
<li>BCA</li>
<li>B.Sc It</li>
<li>B.Sc CS</li>
</ul>
</li>
<li> PG Course
<ul type="circle">
<li>MCA</li>
<li>MSC It</li>
</ul>
</li>
</ul>
</body>
</html>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

OUTPUT

Q2. A Program to illustrate Img tag, and Hyper Link tag in a proper way and
make clickable image

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<img src="F2.jpeg" height="200" width="200">
<a href="forms1.html">forms</a>
</body>
</html>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

OUTPUT

HYPERLINK

CLICKABLE IMAGE

<html>
<head>
<title>IMAGE MAP</title>
</head>
<body>
<img src="workplace.jpeg" alt="Workplace" usemap="#workmap">
<map name="workmap">
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<area shape="rect" coords="34,44,270,350" alt="Computer"


href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.html">
<area shape="circle" coords="337,300,44" alt="Coffee"
href="coffee.html">
</map>
</body>
</html>

OUTPUT

Q3. A Program to illustrate current semester time table using table tag

<html>
<head>
<title>TIME TABLE</title>
</head>
<body>
<h3 align="center">BCA-4 SEC-A,LT3</h3>
<table border="2" cellspacing="0" align="center">
<tr>
<th>TIME=></th>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<th rowspan="2">8:00AM-8:55AM</th>
<th rowspan="2">8:55AM-9:50AM</th>
<th rowspan="2">10:10AM-11:05AM</th>
<th rowspan="2">11:05AM-12:00PM</th>
<th rowspan="2">12:00PM-12:55PM</th>
<th rowspan="2">1:10PM-2:05PM</th>
<th rowspan="2">2:05PM-3:00PM</th>
<th rowspan="2">3:10PM-4:05PM</th>
<th rowspan="2">4:05PM-5:00PM</th>
<th rowspan="2">5:00PM-5:55PM</th>
</tr>
<tr>
<th>DAYS</th>
</tr>
<tr>
<th>MONDAY</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>TBC 401</td>
<td>TBC 403</td>
<td>TBC 405</td>
<td>TBC 402</td>
<td>TBC 404</td>
<td></td>
</tr>
<tr>
<th>TUESDAY</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>TBC 401</td>
<td>TBC 402</td>
<td>TBC 403</td>
<td>TBC 405</td>
<td>TBC 406</td>
<td></td>
</tr>
<tr>
<th>WEDNESDAY</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>TBC 406</td>
<td>TBC 404</td>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<td>TBC 403</td>
<td>TBC 401</td>
<td colspan="2">CBNST Lab DL2</td>
<td></td>
</tr>
<tr>
<th>THURSDAY</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>TBC 401</td>
<td>TBC 404</td>
<td>TBC 405</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>FRIDAY</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>TBC 402</td>
<td>TBC 404</td>
<td colspan="2">PYTHON LAB</td>
<td>TBC 406</td>
<td></td>
<td></td>
</tr>
<tr>
<th>SATURDAY</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2">WEB LAB</td>
<td></td>
<td></td>
<td></td>
</tr> </table>
<h1></h1>
<table border="2" cellspacing="0" align="center">
<tr>
<td>TBC 401</td>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<td>Data Analytics Using Python</td>


<td>Ms.Garima</td>
</tr>
<td>TBC 402</td>
<td>Microprocessor</td>
<td>Mr.Kamlesh Kukreti</td>
</tr>
<td>TBC 403</td>
<td>Software Project Management and Information Systems</td>
<td>Mr.Pramod Mehra</td>
</tr>
<td>TBC 404</td>
<td>Web Technologies</td>
<td>Mr.Harendra Singh Negi</td>
</tr>
<td>TBC 405</td>
<td>Computer Based Numerical and Statistical Techniques</td>
<td>Dr.Digvijay Tanwar</td>
</tr>
<td>TBC 406</td>
<td>Career Skill-II</td>
<td>Mr.Shobhit</td>
</tr>
<td>PBC 401</td>
<td>Python Programming Lab</td>
<td>Ms.Garima/Mr.Aditya Joshi</td>
</tr>
<td>PBC 402</td>
<td>Web Technologies and CBNST Lab</td>
<td>Ms.Afsar Jahan/Mr.Anmol/Mrs.Vandana/Mr.Vidit</td>
</tr> </table>
<h3 align="center">C.C.Harendra Singh Negi</h3>
</body>
</html>
OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

Q4. A Program to illustrate frameset by dividing the screen according to your


requirement and display a complete webpage in a proper format

<html>
<head><title>Square table</title>
</head>
<frameset rows="25%,*,15%" border="10">
<frame name="e" src="top.html">
<frameset cols="*,60%,*">
<frame name="a" src="left.html">
<frame name="b" src="center.html">
<frame name="c" src="right.html">
</frameset>
<frame name="d" src="bottom.html">
</frameset>
</html>

TOP.HTML

<html>
<head>
<title>frame set</title>
</head>
<body align="center" bgcolor="aqua" >
<font size="30">
<a href="home.html "target="b">Home</a>&nbsp
<a href="Syllabus.html" target="b">Syllabus</a>&nbsp
<a href="Time Table.html" target="b">Time Table</a>&nbsp
<a href="Gallery.html" target="b">Gallery</a>&nbsp
</font>
</body>
</html>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

LEFT.HTML
<html>
<head>
<title>left</title>
</head>
<body bgcolor="pink">
<font size="20">
<ul type="disc">
<li> UG course
<ul type="circle">
<li><a href="left.html" target="b">BCA</a></li>
<li><a href="right.html" target="b">B.Sc It</a></li>
<li><a href="bottom.html" target="b">B.Sc CS</a></li>
</ul>
</li>
<li> PG Course
<ul type="circle">
<li><a href="left.html" target="b">MCA</a></li>
<li><a href="top.html" target="b">MSC It</a></li>
</ul>
</li>
</ul>
</font>
</body>
</html>

RIGHT.HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="yellow">
<h1><u>
<center>Notification</center>
</u></h1>
<font size="6">
<marquee direction="up" behaviour="scroll">Registration</marquee>
<marquee direction="up" behaviour="scroll">Examination</marquee>
<marquee direction="up" behaviour="slide">Result</marquee>
<marquee direction="up" behaviour="slide">Notice</marquee>
<marquee direction="up" behaviour="slide">Updates</marquee>
</font>
</body>
</html>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

CENTER.HTML

<html>
<head><title>center</title>
</head>
<body >
<p align="center"><font size="18" color="red"
face="Algerian">Welcome BCA IV</font></p>
<hr color="red">
</body>
</html>

BOTTOM.HTML

<html>
<head><title>bottom</title>
</head>
<body bgcolor="aqua">
<p align="center"><font size="30" color="black" face="Times In
Roman">Copyright Reserved To BCA IV</font></p>
</body>
</html>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

Q5. A Program to illustrate graphic era university enquiry form using form tag
and input controls

<html>
<head>
<title>Registration Form</title>
</head>

<body>
<form>
<fieldset>
<legend>
Enquiry Form
</legend>
<table>
<tr>
<td>
<label for="Name">Name</label>
</td>
<td>
<input type="text" placeholder="Name" name="" required>
</td>
</tr>
<tr>
<td>
<label for="Father Name"> Father Name</label>
</td>
<td>
<input type="text" placeholder=" Father Name" name="" required>
</td>
</tr>
<tr>
<td>
<label for=" Mother Name"> Mother Name</label>
</td>
<td>
<input type="text" placeholder=" Mother Name" name="" required>
</td>
</tr>
<tr>
<td>
<label for="Phone Number">Phone Number</label>
</td>
<td>
<input type="phone" placeholder="9867******" required>
</td>
</tr>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<tr>
<td>
<label for="email">Email</label>
</td>
<td>
<input type="email" placeholder="example1@*8" required>
</td>
</tr>
<tr>
<td>
<label for="password">Password</label>
</td>
<td>
<input type="password" placeholder="Password">
</td>
</tr>
<tr>
<td>
<label for="Gender">Gender</label>
</td>
<td>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</td>
</tr>
<tr>
<td>
Date of Birth:
</td>
<td>
<input type="date" required>
</td>
</tr>
<tr>
<td>
Hobbies:
</td>
<td>
<input type="checkbox" singing>singing
<input type="checkbox" Dancing>Dancing
<input type="checkbox" playing>playing
</td>
</tr>
<tr>
<td>
Education Qualification:
</td>
<td>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<select>
<option>Select Option</option>
<option>10+2</option>
<option>Graduation</option>
<option>Postgraduation</option>
</select>
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
<input type="text" placeholder="Address">
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

Q6. A Program to design your previous semester mark sheet

<html>
<head>
<title> Result</title>
<style>
tr {
text-align: center;
}

pre,
.one {
font-weight: bold;
font-size: larger;
}

span {
font-weight: 50;
}

hr {
font-weight: bolder
}
</style>
</head>

<body>
<table class="one">
<tr>
<th width="500"><img src="qq.jpg" width="200"
height="150"></th>
<td>Graphic Era (Deemed to be) University</td>
</tr>
<tr>
<td></td>
<td>STATEMENT OF MARKS(PROVISIONAL)</td>
</tr>
<tr>
<td></td>
<td> BACHELOR OF COMPUTER APPLICATION - III SEMESTER
EXAMINATION (2023-24)</td>
</tr>
</table>
<pre>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

Name of Student: <span>Karan Rana</span>


Enrollement No: <span>GE-22212825</span>

Father's Name : <span>Kamal Singh Rana</span>


Roll No: <span>2102825</span>
</pre>
<table align="cellpadding" border="2px" cellspacing="0"
cellpadding="7">
<tr>
<th></th>
<th colspan="2">SUBJECT</th>
<th>CREDITS</th>
<th colspan="2">MID SEMESTER EXAM</th>
<th colspan="2">SESSIONAL MARKS</th>
<th colspan="2">END SEMESTER EXAM</th>
<th>TOTAL MARKS OBTAINED</th>
<th>GRADE</th>
<th>GRADE POINTS</th>
</tr>
<tr>
<td></td>
<th>CODE</th>
<th>NAME</th>
<td></td>
<th>Max.</th>
<th>Obt</th>
<th>Max.</th>
<th>Obt</th>
<th>Max.</th>
<th>Obt</th>
<td></td>
<td></td>
<td></td>

</tr>
<tr>
<th rowspan="6">Theory</th>
<td>TBC301</td>
<td>Data Communication and Computer Networks</td>
<td>3</td>
<td>25</td>
<td>22</td>
<td>25</td>
<td>24</td>
<td>50</td>
<td>43</td>
<td>89</td>
<td>O</td>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<td>10</td>
</tr>
<tr>
<td>TBC302</td>
<td>Database Management System</td>
<td>3</td>
<td>25</td>
<td>17</td>
<td>25</td>
<td>22</td>
<td>50</td>
<td>27</td>
<td>66</td>
<td>A</td>
<td>8</td>
</tr>
<tr>
<td>TBC303</td>
<td>Java Programming</td>
<td>3</td>
<td>25</td>
<td>23</td>
<td>25</td>
<td>21</td>
<td>50</td>
<td>43</td>
<td>87</td>
<td>O</td>
<td>10</td>
</tr>
<tr>
<td>TBC304</td>
<td>Computer Organization and Architecture</td>
<td>3</td>
<td>25</td>
<td>23</td>
<td>25</td>
<td>22</td>
<td>50</td>
<td>36</td>
<td>81</td>
<td>A+</td>
<td>9</td>
</tr>
<tr>
<td>TBC305</td>
<td>Software Engineering</td>
<td>3</td>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<td>25</td>
<td>21</td>
<td>25</td>
<td>24</td>
<td>50</td>
<td>38</td>
<td>83</td>
<td>A+</td>
<td>9</td>
</tr>
<tr>
<td>TBC306</td>
<td>Career Skills-I</td>
<td>2</td>
<td>25</td>
<td>17</td>
<td>25</td>
<td>20</td>
<td>50</td>
<td>28</td>
<td>65</td>
<td>B+</td>
<td>7</td>
</tr>
<tr>
<th rowspan="4">Practical</th>
<td>PBC301</td>
<td>DBMS Lab</td>
<td>2</td>
<td>25</td>
<td>23</td>
<td>25</td>
<td>22</td>
<td>50</td>
<td>48</td>
<td>93</td>
<td>O</td>
<td>10</td>
</tr>
<tr>
<td>PBC302</td>
<td>Java Programming Lab</td>
<td>2</td>
<td>25</td>
<td>22</td>
<td>25</td>
<td>22</td>
<td>50</td>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<td>34</td>
<td>78</td>
<td>A+</td>
<td>9</td>

</tr>
<tr>
<td>SBC301</td>
<td>Seminar</td>
<td>1</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>100</td>
<td>94</td>
<td>94</td>
<td>O</td>
<td>10</td>
</tr>
<tr>
<td>GP301</td>
<td>General Proficiency</td>
<td>1</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>100</td>
<td>90</td>
<td>90</td>
<td>O</td>
<td>10</td>
</tr>
</table>
<pre>
Result: <span>Pass</span>
Total No.of Credits registered: <span>23</span>
Total No. f Credits earned: <span>23</span>
SGPA: <span>9.13</span>

CGPA:

INSTRUCTIONS

1.This is internet generated document and cannot be used for any legal
purpose.
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

2. Original Marks Sheet will be issued only once. For issue of Duplicate
marks sheet, the University office may be contacted.
3. The Candidate will be declared pass by securing at least 40 % marks by
taking into account Mid Term Exam along with Sessional &End Term Marks in
aggregate of each theory paper. However, in practical, it is mandatory to
obtain
at least 40 % marks in Mid Term & End Term exam separately.
4. Candidate will be declared pass in a semester if he / she passes in all
theory and practical subjects.
5. (i) A candidate may be awarded grace marks up to a maximum of 10 marks
without any restriction.
(ii) Grace marks will be applicable only to the candidates who can be
declared pass in a semester after the award of the grace marks.
6. For 2019 batch mandatory to obtain 30 % marks in end term theory
subjects, and 40 % end sem Practical subjects separately.
7. For 2020 batch IV sem & 2021 batch II sem onward mandatory to obtain 30
% marks in end term theory and 40% practical, for practical subject total
should be 50 %, Total grace 10 Marks, in 3 theory Subjects only, in one
subject
maximum 5 Marks, no grace in practical subjects.
8.NC=Non Credit

Date
Checked by
Registrar
<hr>
</pre>
</body>
</html>

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

Q7. A Program to implement pseudo elements in HTML


Karan Rana BCA-4th Sem, Sec-A Roll-No-42

FIRST-LINE OUTPUT

<html>
<head>
<title>Pseduo Element</title>
<style>
p::first-line{
font-size: 30px;
font-weight: bolder;
text-decoration: double;
text-transform: uppercase;
}
</style>
</head>
<body>
<p>Hello BCA IV A.</p>
</body>
</html>

FIRST-LETTER
<html>
<head>
<title>Pseduo Element</title>
<style>
p::first-letter{
font-size: 30px;
font-weight: bolder;
text-decoration: underline;
text-transform: uppercase;}
</style>
</head>
<body>
<p>Hello BCA IV A.</p>
</body>
</html>

INSERT CONTENT BEFORE AND AFTER


<html>
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<head>
<title>Pseduo Element</title>
<style>
p::before {
content: "******";
}
p::after {
content: "******";
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

OUTPUT

Q11. A Program to design 8 paragraphs with different border style.


Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<html>
<head>
<title>Border</title>
</head>
<body>
<h2>The border-style Property</h2>
<p style="border-style: dotted;">A dotted border.</p>
<p style="border-style: dashed;">A dashed border.</p>
<p style="border-style: solid;">A solid border.</p>
<p style="border-style: double;">A double border.</p>
<p style="border-style: groove;">A groove border.</p>
<p style="border-style: rigid;">A rigid border.</p>
<p style="border-style: inset;">An inset border.</p>
<p style="border-style: outset;">A outset border.</p>
</body>
</html>

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

Q10. A Program to implement float and visibility property using internal css.

FLOAT-LEFT

<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p>
<img src="ice.jpeg" alt="Good Morning" height="100px"
width="200px">
This is float example.
Good Morning
</p>
</body>
</html>

OUTPUT

FLOAT-RIGHT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>
<img src="qq.jpg" alt="Good Morning" height="100px" width="200px">
This is float example.
Good Morning
</p>
</body>
</html>

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

VISIBILITY

<html>
<head>
<style>
h2.a {
visibility: visible;
}

h2.b {
visibility: hidden;
}
</style>
</head>
<body>

<h1>The visibility Property</h1>

<h2 class="a">This heading is visible</h2>

<h2 class="b">This heading is hidden</h2>

<p>Notice that the hidden heading still takes up space on the


page.</p>

</body>
</html>

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

Q8. A Program to implement following CSS properties in HTML


Karan Rana BCA-4th Sem, Sec-A Roll-No-42

a. CSS Background
b. CSS Padding
c. Word wrap
d. White Space

CSS BACKGROUND
<html>
<head>
<style>
.one {
background: aqua;
}

.two {
background: red;
}
</style>
</head>
<body>
<p class="one">CSS background sets the background of elements.
It is used to define the background effects for elements in single line.
There are lots of properties to design the background. </p>
<p class="two">CSS background sets the background of elements.
It is used to define the background effects for elements in single line.
There are lots of properties to design the background. </p>
</body>
</html>

OUTPUT

CSS PADDING
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<html>
<head>
<title>
Padding
</title>
<style>
div {
padding-left: 30px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 50px;
height: 80px;
width: 80px;
border: 1px solid red;
}
</style>
</head>

<body>
<div align="center">
BCA IV A
</div>
</body>
</html>

OUTPUT

CSS WORD-WRAP
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

<html>
<head>
<title>
Padding
</title>
<style>
div {
word-wrap: normal;
width: 150px;
border: 1px solid black;
}
</style>
</head>
<body>
<div align="center">
Hello!How are you all.
</div>
</body>
</html>

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

BREAK-WORD

<html>
<head>
<title>
Padding
</title>
<style>
div {
word-wrap: break-word;
width: 150px;
border: 1px solid black;
}
</style>
</head>
<body>
<div align="center">
Hello!How are you all.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, modi
aut magni nihil quia quo deleniti provident? Natus ut esse in! Ab
deleniti sunt officiis alias numquam. Pariatur, enim ab.
</div>
</body>
</html>

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

WHITE-SPACE
NORMAL

<html>
<head>
<title>
Padding
</title>
<style>
div{
white-space: normal;
width: 150px;
color: blue;
}
</style>
</head>
<body>
<div align="center">
Hello!How are you all.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
quisquam provident culpa, cupiditate quia quis quidem, perferendis
ea at cumque molestiae. Delectus aliquid rem porro quidem similique.
Velit, molestias numquam.
</div>
</body>
</html>

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

NOWRAP

<html>
<head>
<title>
Padding
</title>
<style>
div {
white-space: nowrap;
width: 150px;
color: blue;
}
</style>
</head>

<body>
<div align="center">
Hello!How are you all.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
quisquam provident culpa, cupiditate quia quis
quidem, perferendis ea
</div>
</body>
</html>

OUTPUT
Karan Rana BCA-4th Sem, Sec-A Roll-No-42

PRE

<html>
<head>
<title>
Padding
</title>
<style>
div {
white-space: pre;
width: 150px;
color: blue;
}
</style>
</head>
<body>
<div align="center">
Hello!How are you all.
Good Morning.
All the best
</div>
</body>
</html>

OUTPUT

You might also like