Cnit File

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
● 
<hr> 
<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>
</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.

Cnit File

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cnit File

Uploaded by

Copyright:

Available Formats

J.C.

CNIT LAB FILE (OCSC – 302A)

SUBMITTED TO: SUBMITTED BY:

Program Program Name Signature

2. Create html document with

3. Create html document with table

4. Create form with input type ,

5. Create html document with table

7. Create html document Containing

8. Create a website of 6-7 pages by

9. Create an html document having

10. Create a form using html which

<title> This is a document title </title>

<h1> This is heading </h1>

<p> Document content goes here ….</p>

● The <h1> element defines a large heading.Each heading of text should go in

<title> Program 1 </title>

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

<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

<br>

<hr>

<p><blink> BLINKING TEXT. </blink></p>

<h1>list of Subjects in Bsc.(H) Mathematics</h1>

<h2>ordered list with numbers</h2>

<li>Probability and Statistics</li>

<h1> list of Books required in Bsc(H) Mathematics</h1>

<h2> unordered list with square box</h2>

<li>Contempary Abstract Algebra</li>

<h3> MVC Book image</h3>

<h3>university website link</h4>

<a href="https://www.jcboseust.ac.in/">This is a link</a>

<title> table </title>

<table border="solid" width="500" height="500"><tr>

<th> Roll number </th>

<th> Student Name </th>

<th> university </th>

<td> jcbust </td>

<td colspan="3"> 02 </td>

<td colspan="2" rowspan="3"> <img

<td colspan="3">03 </td>

<td colspan="3"> 04</td>

<h1> Application form for applying iit Jam </h1>

student name:<input type="text"name="student name" />

course:<input type="text"name="course" />

Rollno:<input type="int"name="Rollno" />

<label for="marks"> last sem marks</label>

<textarea id="comments" name="comments" rows="4"

<input type="submit" value="submit">

<h1> Students semester Result</h1>

You might also like