Scribd
Upload
19 views

Cnit File

The document is a lab file submitted by a student named Varsha to their professor Dr. Shivi Garg. It contains 10 programs to be completed in HTML. The programs include creating documents with basic formatting tags, lists, tables, frames, and forms. Each program is numbered and includes a brief description of the task to be completed. There is also an introduction section about HTML that covers its features, structure, and common tags.

Uploaded by

shardareena111
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Cnit File

The document is a lab file submitted by a student named Varsha to their professor Dr. Shivi Garg. It contains 10 programs to be completed in HTML. The programs include creating documents with basic formatting tags, lists, tables, frames, and forms. Each program is numbered and includes a brief description of the task to be completed. There is also an introduction section about HTML that covers its features, structure, and common tags.

Uploaded by

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

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.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy