HTML B.scprograms
HTML B.scprograms
Output
25. Write a XML Program to represent Student Data using DTD.
students2.xml
<?xml version = "1.0"?>
<!-- students2.xml for the DTD -->
<!DOCTYPE students SYSTEM "students.dtd">
<students>
<student>
<name>
<firstname> James </firstname>
<lastname> Smith </lastname>
</name>
<address>
<street> 101 South Street</street>
<city> Halifax </city>
<email> james@dal.ca </email>
<phone> 4940001 </phone>
</address>
</student>
<student>
<name>
<firstname> Tom </firstname>
<lastname> White </lastname>
</name>
<address>
<street> 202 Victoria Road </street>
<city> Dartmouth </city>
<email> tom@dal.ca</email>
<phone> 4940002 </phone>
</address>
</student>
</students>
output
24. Write a JavaScript program to create registration Form with Validations.
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
</head>
<body>
<center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>
<hr>
<form method="" action="" name="reg_form" onsubmit="return validate()">
<h2>Registration Form</h2>
<table>
<tr>
<td><label>First Name: </label></td>
<td>
<input type="text" name="fname" placeholder="First Name">
</td>
</tr>
<tr>
<td><label>Last Name: </label></td>
<td>
<input type="text" name="lname" placeholder="Last Name">
</td>
</tr>
<tr>
<td><label>Address: </label></td>
<td>
<input type="textarea" size="50" name="address" placeholder="Address">
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</td>
</tr>
<tr>
<td><label>Email Id: </label></td>
<td>
<input type="text" name="email" placeholder="example@gmail.com">
</td>
</tr>
<tr>
<td><label>Mobile: </label></td>
<td>
<input type="number" name="mobile">
</td>
</tr>
<tr>
<td><label>Course: </label></td>
<td>
<select name="course">
<option value="select course">select course</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JAVASCRIPT</option>
<option value="Java">JAVA</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
After applying the CSS code, the form will change to a responsive format.
<style type="text/css">
body{
font-family: Calibri;
}
input[type="text"] {
width: 250px;
}
input[type="submit"], input[type="reset"] {
width: 77px;
height: 27px;
position: relative;left: 180px;
}
form{
text-align: center;
font-family: Calibri;
font-size: 20px;
border: 3px solid black;
width: 600px;
margin: 20px auto;
}
td {
padding: 10px;
}
td:first-child {
text-align: right;
font-weight: bold;
}
td:last-child {
text-align: left;
</style>
Output
23. Write a JavaScript program using JavaScript built in objects
<html>
<head>
<title>JavaScript Math Object Methods</title>
</head>
<body>
<script type="text/javascript">
Output
ABS Test Value : 20
ACOS Test Value : 3.141592653589793
ASIN Test Value : 1.5707963267948966
ATAN Test Value : 0.4636476090008061
<html>
<body>
<center>
<h2>Date Methods</h2>
<script type="text/javascript">
var d = new Date();
document.write("<b>Locale String:</b> " + d.toLocaleString()+"<br>");
document.write("<b>Hours:</b> " + d.getHours()+"<br>");
document.write("<b>Day:</b> " + d.getDay()+"<br>");
document.write("<b>Month:</b> " + d.getMonth()+"<br>");
document.write("<b>FullYear:</b> " + d.getFullYear()+"<br>");
document.write("<b>Minutes:</b> " + d.getMinutes()+"<br>");
</script>
</center>
</body>
</html>
Output:
<html>
<body>
<center>
<script type="text/javascript">
var str = "CareerRide Info";
var s = str.split();
document.write("<b>Char At:</b> " + str.charAt(1)+"<br>");
document.write("<b>CharCode At:</b> " + str.charCodeAt(2)+"<br>");
document.write("<b>Index of:</b> " + str.indexOf("ide")+"<br>");
document.write("<b>Lower Case:</b> " + str.toLowerCase()+"<br>");
document.write("<b>Upper Case:</b> " + str.toUpperCase()+"<br>");
</script>
<center>
</body>
</html>
Output:
22. Write a JavaScript programs using any 5 events.
<!DOCTYPE html>
<html>
<head><title> ONSUBMIT EVENT </title>
<script>
function confirmInput() {
fname = document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to www.w3Schools.com");
}
</script>
</head>
<body>
</body>
</html>
Output
21. Write a JavaScript program to print multiplication table of given number using loop.
<!DOCTYPE html>
<html>
<body>
<h1>JS Multiplication Table</h1>
<script>
var table = 9;
var length = 10;
var i = 1;
Output :
JS Multiplication Table
Multiplication table: 9
1*9=9
2 * 9 = 18
3 * 9 = 27
4 * 9 = 36
5 * 9 = 45
6 * 9 = 54
7 * 9 = 63
8 * 9 = 72
9 * 9 = 81
10 * 9 = 90
20. Write a JavaScript program using switch case.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script></body>
</html>
Today is Saturday
19. Write a JavaScript program to wish good morning, good afternoon, good evening depending
on the current time
<!DOCTYPE html>
<html>
<body>
<head>
<title>Show good morning good night wish as per time Javascript</title>
</head>
<script type="text/javascript">
document.write("<center><font size=+3 style='color: green;'>");
var day = new Date();
var hr = day.getHours();
if (hr >= 0 && hr < 12) {
document.write("Good Morning!");
} else if (hr == 12) {
document.write("Good Noon!");
} else if (hr >= 12 && hr <= 17) {
document.write("Good Afternoon!");
} else {
document.write("Good Evening!");
}
document.write("</font></center>");
</script>
</html>
</body>
</html>
OUTPUT :
Good Afternoon!
18. Write a JavaScript program to calculate area of rectangle using function
<!DOCTYPE html>
<html>
<body>
<p>Click the button keyin inputs .</p>
<button onclick="myFunction()">Try it</button>
<p id="a"></p>
<p id="p"></p>
<p id="v"></p>
<script>
function myFunction()
{
var length = prompt("Enter a whole number for the Length of your rectangle.");
var width = prompt ("Enter a whole number for the width of your rectangle.");
var depth= prompt ("Enter a whole number for the depth of your rectangle prism");
</body>
</html>
OUTPUT
17. Write a HTML program to create login form and verify username and password.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login Page </title>
<style>
Body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
button {
background-color: #4CAF50;
width: 100%;
color: orange;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid green;
box-sizing: border-box;
}
button:hover {
opacity: 0.7;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
margin: 10px 5px;
}
.container {
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<center> <h1> Student Login Form </h1> </center>
<form>
<div class="container">
<label>Username : </label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password : </label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
<button type="button" class="cancelbtn"> Cancel</button>
Forgot <a href="#"> password? </a>
</div>
</form>
</body>
</html>
Output
16. Write a HTML program to create your college web site using for mobile device.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on
top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div></body></html>
Output:
15. Write a HTML program to create your college web site using multi column layouts.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</table>
</body>
</html>
14. Write a HTML program to create CSS on links, lists, tables and generated content.
CSS TABLES
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html> OUTPUT
CSS LISTS
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
OUTPUT
CSS LINKS
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
OUTPUT
13. Write a HTML program to create different types of style sheets.
A cascading style sheet file will have extension as .css and it will be included in HTML files
using <link> tag.
Example
Consider we define a style sheet file style.css which has following rules −
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Output :
This is red
This is thick
This is green
This is thick and green
If you want to apply Style Sheet rules to a single document only, then you can include those
rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
OUTPUT
This is red
This is thick
This is green
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
Output
This is red
This is thick
This is green
<head>
<title>HTML Frames</title>
</head>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Output
11. Write a HTML program to create a form using text inputs, password inputs, multiple line
text input, buttons, check boxes, radio buttons, select boxes, file select boxes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
.container {
padding: 50px;
background-color: lightblue;
}
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91" size="
2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
</html>
Output:
10. Write a HTML program to create your time table.
<!DOCTYPE html>
<html>
<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">
<!--<caption>Timetable</caption>-->
<tr><td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br></td>
<td align="center" height="50" width="100"><b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50" width="100">
<b>II<br>10:20-11:10</b>
</td>
<td align="center" height="50" width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50" width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50" width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50" width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50" width="100">
<b>VI<br>2:20-3:10</b>
</td>
<td align="center" height="50" width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan="3" align="center" height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center" height="50">LAB
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center" height="50">LIBRARY </td> </tr>
<tr>
<td align="center" height="50">
<b>Thursday</b>
</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center" height="50">LAB
</td>
<td align="center" height="50">Mat</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td colspan="3" align="center"
height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>
</html>
Output
9. Write a HTMl program using images, videos and audios
<!DOCTYPE HTML>
<html> <body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element. </video>
</body></html>
OUTPUT
<!DOCTYPE HTML>
<html> <body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element. </audio>
</body>
</html>
OUTPUT
8. Write a HTML Menu page for Example cafe site.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Pizza</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Amatic SC", sans-serif}
</style>
<body>
<!-- Start Content -->
<div id="home" class="w3-content">
Output:
4. Write a HTML program using phrase element tags
<HTML><HEAD><TITLE> PHRASE TAGS </head></title>
<body>
This is a <em>beautiful</em> mall.<br>
Mark these <mark>words</mark>.
<br>
These examples are <strong>very important</strong>.<br>
Do you know the nickname of <abbr title = "Rowan Atkinson">Mr. Bean</abbr>?<br>
You are studying <acronym>HTML</acronym>.
<br>
This can be defined as <dfn>scripting</dfn>. <br><blockquote>This is all about India,
which is a developing country having the second largest population.</blockquote><br>
This can be defined as <q>scripting</q>.<br>
This is an example of code <code><?php echo "Hello World!" ?></code>
<br> <p>This is an example of <kbd>scripting</kbd>.</p> <p>Press <kbd>ctrl+c</kbd> to
copy.</p>
<br>
He is Mr. Bean <address>He lives in Boston.</address>
</body></html>
OUTPUT
3. Write a HTML program using presentational element tags <b>, <i>, <strike>, <sup>,
<sub>, <big>, <small>, <hr>.-->
<html>
<head>
<title>presentational elements</title>
</head>
<body bgcolor="orange" text="white">
<h3> <u>PRESENTATIONALELEMENTS</u></h3>
<u><b> element : </u>
<p><b>Be Bold</b></p>
<u><i> element :</u>
<p><b>Theme of the year 2019-20-<i>Happiness</i></p>
<u><strike> element : </u>
<p><b>Tomatoes are now is <strike>Rs70</strike> Rs 40 per kg.</p>
<u><sup> element : </u>
<p>x<sup>2</sup></p>
<u><sub> element : </u>
<p>H<sub>2</sub>O</p>
<u><big> element : </u>
<p>Think <big> BIG</big></p>
<u><small> element : </u>
<p> Do not think <small>SMALL</small></p>
<u><hr> element : </u>
<p><hr align="center" width="300" color="red" size="5"></p>
</body>
</html>
Output
2. Write a HTML program by using text formatting tags.
<html>
<head><title>Text Formatting tags</title></head>
<body>
<h2>Welcome To web technologies</h2>
<!--Normal text-->
<p>Hello web technologies</p>
<!--Text in Strong-->
<p><strong>Hello students</strong></p>
<br>
<!--Text in small-->
<p><small>Hello students</small></p>
<br>
<!--Text in big-->
<p><big>Hello Folks</big></p>
<br>
<!--Text in Highlight-->
<p><mark>Hello friends</mark></p>
<!--Text in Bold-->
<p><b>Hello web technologies</b></p>
<!--Text in Strong-->
<p><strong>Hello web technologies</strong></p>
<!--Text in Italics-->
<p><i>Hello web technologies</i></p>
<!--Text in Emphasize-->
<p><em>Hello web technologies</em></p>
<!--Text in Superscript-->
<p>Hello<sup>web technologies</sup></p>
<!--Text in Subscript-->
<p>Hello<sub>web technologies</sub></p>
<!--Text in Delete-->
<p> <del>Hello web technologies</del> </p>
<!--Text in Insert-->
<p><ins>Hello web technologies</ins></p>
</body>
</html>
Output
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>
output
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>How to use the <br> tag</h1>
<p> We can insert the <br /> tag inside the paragraph, <br /> to transfer a part of the
text to another line if necessary.</p>
</body>
</html>
output
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
</body>
</html>
output