J.C.
BOSE UNIVERSITY OF
SCIENCE AND TECHNOLOGY
YMCA, FARIDABAD
CNIT LAB FILE (OCSC – 302A)
SUBMITTED TO: SUBMITTED BY:
Dr. Shivi Garg Varsha
22001323059
B.sc(H) Mathematics
INDEX
Program Program Name Signature
Number
1. Create html document with
following format - bold,
italic,underline,color, heading ,
title,font and font width ,
background,paragraph,line
braces, horizontal line , blinking
text as well as marque text.
2. Create html document with
ordered and unordered list and
with image .
3. Create html document with table
using row span and col span .
4. Create form with input type ,
select and text area in html.
5. Create html document with table
Containing roll number , student’s
name and grade in tabular form .
6. Create an html document having
two vertical frames will appear..
7. Create html document Containing
Horizontal frames.
8. Create a website of 6-7 pages by
applying all the effects that were
done in the above problem .
9. Create an html document having
multiple frames.
10. Create a form using html which
has the following type of controls :
Text box , option /radio buttons,
check boxes, reset and submit
buttons.
Introduction of HTML
HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.
● Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.
● HTML is a Markup Language which means you use HTML to simple
"mark-up" a text document with tags that tell a Web browser how to
structure it to display.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995. HTML 4.01 was a
major version of HTML and it was published in late 1999. Though the HTML 4.01
version is widely used, currently we are having the HTML-5 version which is an
extension to HTML 4.01, and this version was published in 2012.
Features of HTML:
● It is easy to learn and easy to use.
● It is platform-independent.
● Images, videos, and audio can be added to a web page.
● Hypertext can be added to the text.
● It is a markup language
Html structure:
<!DOCTYPE html>
<html>
<head>
<title> This is a document title </title>
</head>
<body>
<h1> This is heading </h1>
<p> Document content goes here ….</p>
</body>
</html>
HTML Tags :
<!DOCTYPE html> : This tag defines the document type and HTML version.
<html> : This tag encloses the complete HTML document and mainly comprises
of document header which is represented by <head>...</head> and document body
which is represented by <body>...</body> tags.
<head> : This tag represents the document's header which can keep other HTML
tags like <title>, <link> etc.
<title> : The <title> tag is used inside the <head> tag to mention the document
title.
<body>: This tag represents the document's body which keeps other HTML tags
like <h1>, <div>, <p> etc.
<h1> : This tag represents the heading.
<p> : This tag represents a paragraph.
Basic tags
● The <h1> element defines a large heading.Each heading of text should go in
between an opening <h1> and a closing </h1> tag.
● The <p> element defines a paragraph.Each paragraph of text should go in
between an opening <p> and a closing </p> tag
● <!--> is the comment tag where we can write comments for our
understanding.
● <pre>Represents preformatted text which is to be presented exactly as
written in the HTML file.Any text between the opening <pre> tag and the
and the closing </pre> tag will preserve the formatting of the source
document.
● <br> or </br />Produces a line break in text (carriage-return). It is useful
for writing poems or an address, where the division of lines is significant. It
is an empty tag , anything following it starts from the next line.
● The <hr> or <hr/> tag defines a thematic break in an HTML page (e.g. a
shift of topic).The <hr> or <hr/> element is most often displayed as a
horizontal rule that is used to separate content (or define a change) in an
HTML page
● <b> used for making text bold.Anything that appears within <b>...</b>
element, is displayed in bold .
● <i> used for making text italic.Anything that appears within <i>...</i>
element is displayed in italicized
● <u> used to underline text.Anything that appears within <u>...</u> element,
is displayed with underline
● <sub> Specifies inline text which should be displayed as subscript for solely
typographical reasons. Subscripts are typically rendered with a lowered
baseline using smaller text.The content of a <sub>...</sub> element is
Written in subscript.
● <sup> Specifies inline text which is to be displayed as superscript for solely
typographical reasons. Superscripts are usually rendered with a raised
baseline using smaller text.The content of a <sup>...</sup> element is
Written in superscript.
● <strik> used to strik a text.Anything that appears within
<strike>...</strike> element is displayed with strikethrough, which is a thin
line through the text .
● <h1>----<h6>- Represent six levels of section headings. <h1> is the highest
section level and <h6> is the lowest.
● <body bgcolor=” “> is used to add colour to the background of the page
● <font>The <font> tag is used to specify the font face, font size, and color
of text .
● <center> tag to put any content in the center of the page or any table cell.
● Anything that appears within <em>...</em> element is displayed as
emphasized text.
● Anything that appears with-in <mark>...</mark> element, is displayed as
marked with yellow ink.
PROGRAM 1
Create html document with following format - bold, italic,underline,color,
heading , title,font and font width , background,paragraph,line braces,
horizontal line , blinking text as well as marque text.
<!doctype html>
<html>
<head>
<title> Program 1 </title>
</head>
<body style="background-color:powderblue;">
<h2 style="color:BLUE;font-family:algerian"> example of heading tag h2</h2>
<p><b><h1 style="color:GREEN;"> example of heading h1 </h1> LINE IN BOLD TEXT.
</b></p>
<p> This text is in <i> ITTALIC TEXT. </i></p>
<p>This text is <u> UNDERLINED TEXT. </u></p>
<p><span style="color: green;"> a green paragraph </span></p>
<p style="font-size: 24px;"> CUSTOM SIZE TEXT. </p>
<p style="font-weight: bold;"> BOLD FONT TEXT. </p>
<div style="background-color:WHITE; padding: 10px;"> LINE WITH BACKGROUNG
COLOR WHITE. </div>
<p>This is a paragraph.</p>
<br> <!-- Line break -->
<hr> <!-- Horizontal line -->
<p><blink> BLINKING TEXT. </blink></p>
<marquee behavior="scroll" direction="up"> This is a sample scrolling text that has scrolls in
the upper direction. </marquee>
</body>
</html>
Output
PROGRAM 2
Create html document with ordered and unordered list and with inserting
images, internal and external linking.
<!DOCTYPE html>
<html>
<body>
<h1>list of Subjects in Bsc.(H) Mathematics</h1>
<h2>ordered list with numbers</h2>
<ol type="1">
<li>Multivariate calculus</li>
<li>CNIT</li>
<li>Probability and Statistics</li>
<li>Group theory</li>
<li>LaTex</li>
</ol>
<h1> list of Books required in Bsc(H) Mathematics</h1>
<h2> unordered list with square box</h2>
<ul style="list-style-type:square">
<li>Thomas Calculs</li
<li>Computer Network</li>
<li>Fundamental of Statistics</li>
<li>Contempary Abstract Algebra</li>
<li>Learning LaTex</li>
</ul>
<h3> MVC Book image</h3>
<img src="C:\Users\Lenovo\OneDrive\Pictures\Screenshots\Screenshot
2023-10-18 181644.png" width="104" height="142">
<h3>university website link</h4>
<a href="https://www.jcboseust.ac.in/">This is a link</a>
</html>
Output
PROGRAM 3
Create html table using row span and col span and also insert image in a
table.
<!doctype html>
<html>
<head>
<title> table </title>
</head>
<table border="solid" width="500" height="500"><tr>
<th> Roll number </th>
<th> Student Name </th>
<th> department</th>
<th> Age</th>
<th> university </th>
</tr>
<tr>
<td> 59 </td>
<td> Varsha</td>
<td> Mathematics</td>
<td> 19 </td>
<td> jcbust </td>
</tr>
<tr>
<td colspan="3"> 02 </td>
<td colspan="2" rowspan="3"> <img
src="https://www.kaisanba.com/upload/photos/2023/02/GTXMjXfqnmscepLibqvB
_02_6ee80e17861a8698231461e346f6ee25_cover.jpeg">
</td>
</tr>
<tr>
<td colspan="3">03 </td>
</tr>
<tr>
<td colspan="3"> 04</td>
</tr>
</table>
</body>
</html>
Output
PROGRAM 4
Create form with input type, select and Text area in html.
<!doctype html>
<html>
<head>
<title>form </title>
</head>
<body>
<h1> Application form for applying iit Jam </h1>
<form>
student name:<input type="text"name="student name" />
<br>
course:<input type="text"name="course" />
<br>
Rollno:<input type="int"name="Rollno" />
<br>
<label for="marks"> last sem marks</label>
<select id="marks"name="marks">
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<br><br>
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4"
cols="50"></textarea><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Output
PROGRAM 5
Create an html containing roll no. ,student ‘s name and grades in tabular
form.
<!doctype html>
<html>
<head>
<title>tabular form</title>
</head>
<body>
<h1> Students semester Result</h1>
<table border="2"><tr>
<th>Rollno.</th>
<th>Student's Name</th>
<th>grades</th>
</tr>
<tr>
<td>37</td>
<td>Priyanka Kumari</td>
<td>A</td>
</tr>
<tr>
<td>59</td>
<td>Varsha</td>
<td>A</td>
</tr>
<tr>
<td>14</td>
<td>Isha</td>
<td>A</td>
</tr>
<tr>
<td>30</td>
<td>Nancy Sharma</td>
<td>A+</td>
</tr>
<tr>
<td>52</td>
<td>Sneha Singh</td>
<td>A</td>
</tr>
</table>
</body>
</html>
Output
PROGRAM 6
Create an html document(having two frames) which will appear as columns
form .It means two frames appear in a column and these are called vertical
frames.
