Scribd
Upload
7 views

COMPUTER FILE

This document is a practical file for HTML submitted by a student at GVM Girls College, Sonipat. It includes various HTML topics such as basic structure, tags for headings, paragraphs, lists, tables, forms, and linking methods. Each section provides code examples demonstrating the use of different HTML elements and attributes.

Uploaded by

Komal Antil
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
7 views

COMPUTER FILE

This document is a practical file for HTML submitted by a student at GVM Girls College, Sonipat. It includes various HTML topics such as basic structure, tags for headings, paragraphs, lists, tables, forms, and linking methods. Each section provides code examples demonstrating the use of different HTML elements and attributes.

Uploaded by

Komal Antil
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/ 27

GVM GIRLS COLLEGE, SONIPAT

PRACTICAL FILE
OF
HTML

SUBMITTED TO: SUBMITTED BY:


MS. PRITI
INDEX
S.NO CONTENT SIGNATURE
1 BASIC STRUCTURE OF HTML
2 HEADING TAG
3 PARAGRAPH TAG
4 HORIZONTAL RULE TAG
5 TEXT STYLES
6 MARQUEE ATTRIBUTES
7 TEXT FORMATTING
8 EXTERNAL LINKING
9 INTERNAL LINKING
10 PAGE LAYOUT
11 LISTS (ORDERED AND UNORDERED LISTS)
12 DEFINITION LIST
13 NESTED LIST
14 TABLES
15 FORMS
BASIC STRUCTURE OF HTML
<html>

<head>

<title> HTML BASICS </title>

</head>

<body>

HELLO WORD

HTML STANDS FOR HYPERTEXT MARKUP LANGUAGE

MONDAY'S CHILD IS A POPULAR NURSERY RHYME

EDINBURGH IS THE CAPITAL CITY OF SCOTLAND

THE FASTEST LAP FINISHED IN F1 HISTORY AT SPEED OF 164.267 MPH BY LEWIS HAMILTON IN
ITALIAN GP MONZA IN YEAR 2020

PORSCHE'S NEW 919 HYBRID EVO LE MANS CAR IS FASTER THAN AN F1 CAR

Power levels in Formula E is lower than F1

</body>

</html>

OUTPUT
HEADING TAG
<html>

<head>

<title> HTML BASICS </title>

</head>

<body>

<h1>hypertext markup language</h1>

<h2>hypertext markup language</h2>

<h3>hypertext markup language</h3>

<h4>hypertext markup language</h4>

<h5>hypertext markup language</h5>

<h6>hypertext markup language</h6>

</body>

</html>
PARAGRAPH TEXT
<html>

<head>

<title>heading tag demo</title>

</head>

<body>

<p align=left>the tag is used to define a paragraph. The paragraph can be aligned to the
left,right,entr,or justify using the align attributes.</p>

<p align=right>the tag is used to define a paragraph. The paragraph can be aligned to the
left,right,entr,or justify using the align attributes.</p>

<p align=center>the tag is used to define a paragraph. The paragraph can be aligned to the
left,right,entr,or justify using the align attributes.</p>

</body>

</html>
HORIZONTAL RULES TAG
<html>

<head>

<title>heading tag demo</title>

</head>

<body>

The tag is used to produce a horizontal line spread across the width of the browser window.
This is an empty tag.<hr>

The tag is used to produce a horizontal line spread across the width of the browser
window<br>This is an empty tag.<hr>

The tag is used to produce a horizontal line having size of 36 pixels.<hr sze=36>

The tag is used to produce a horizontal line having size of 36 pixels with no shde.<hrsze=36
noshade>

The tag is used to produce a horizontal line having size of 36 pixels with no shade and width
50%.<hr sze=36 noshade width=50%>

</body>

</html>
TEXT STYLES
<html>

<head>

<title>text style tag demo</title>

</head>

<body>

I am learning to use<i>italic tag</i><br>

I am learning to use<b>bold tag</b><br>

I am learning to use<u>underline tag</u><br>

I am learning to use<s>strike tag</s><br>

I am learning to use superscript tag like x<sup>3</sup><br>

I am learning to use superscript tag like h<sub>2</sub>o

</body>

</html>
MARQUEE ATTRIBUTES
<html>

<head>

<title>text style tag demo</title>

</head>

<body><marquee width="100%"behaviour="scroll"bgcolor="yellow">

This is an example of scroll marquee.

</marquee>

</body>

</html>
TEXT FORMATTING
<html>

<head>

<title>text style tag demo</title>

</head>

<body bgcolor=yellow>

the text has default base front.<br>

<basefont size=5>this text has base font size 5.<br>

<basefont size=7>this text has base font size 7.<br>

<basefont size=2>this text has base font size 2.<br>

<font face="helvetica,arial"size=5 color="green">

The text has helvetical or arial font,size 5 & green color.<font><br>

</body>

</html>
EXTERNAL LINKING
<html>

<head>

<title>text style tag demo</title>

</head>

<body>

<a href="mpage.html">visit my home page</a>

</body>

</html>

Create another file


<html>

<head>

<title>external link demo</title>

</head>

<body>

<center>

<font size=5>Natraj Publishing House</font><br><br>


data structure <br>

programming in c <br>

programming in c++<br>

</center>

</body>

</html>
INTERNAL LINKING
<html>

<head>

<title>internal link demo</title>

</head>

<body>

<center>

<font size=5>Data Structures</font><br><br>

chapter1<br><br>

chapter2<br><br>

<a name ="c3"chapter3</a><br><br>

chapter4<br><br>

chapter5<br><br>

chapter6<br><br>

</center>

<ahref="#c3">go to chapter3</a>

</body>

</html>
PAGE LAYOUT
<html>

<head>

<title>background Image demo</title>

</head>

<body backgound=flower.jpg>

<font size=5>data structures</font><br><br>

link list<br><br>

array<br><br>

</body>

</html>
LISTS
ORDERED AND UNORDERED LISTS
<html>

<head>

<title>List demo</title>

</head>

<body>

<h2>An Ordered HTML List</h2>

<ol type=A>

<li>coffee</li>

<li>tea</li>

<li>milk<li>

</ol><br><br>

<ol type=5>

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ol><br><br>

<ol type=i>

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ol><br><br>

<h2>An unordered HTML list</h2>


<ul>

<li>coffee</li>

<li>milk</li>

<li>tea</li>

</ul>

</body>

</html>
DEFINITION LIST
<html>

<head>

<title>internal link demo</title>

</head>

<body>

<dl>

<dt>COMPUTER

<dd>computer is an electronic device which takes input,process it and give the output

<dt>HTML

<dd>HTML stands for hypertext markup language. HTML is the language used for creating
webpages.

</body>

</html>
NESTED LIST
<html>

<head>

<title>list demo</title>

</head>

<body>

<ol type=1>

<li>Input Devices

<ul type=circle>

<li>Keyboard

<li>Mouse

<li>Lightpen

</ul><br><br>

<li> Output devices

<ul type=circle>

<li>DOT matrix printer

<li> Laser printer

<li> Moniter

</ul><br><br>

</ol><br><br>

</body>

</html>
TABLES
<html>

<head>

<title>TABLE demo</title>

</head>

<body>

<center>

<b>GVM Girls College, Sonipat</b><br><br>

<table border=5 width=50%>

<caption align=bottom>

<b>Marks Detail</b>

</caption>

<tr>

<th>Name</th>

<th>class</th>

<th>Marks</th>

</tr>

<tr align=center>

<td>Kajal</td>

<td>BBA</td>

<td>99</td>

</tr>
<tr align=center>

<td>Muskan</td>

<td>BBA</td>

<td>99</td>

</tr>

<tr align=center>

<td>Chehak</td>

<td>BBA</td>

<td>99</td>

</tr>

<tr align=center>

<td>Yojna</td>

<td>BBA</td>

<td>99</td>

</tr>

<tr align=center>

<td>Sneha</td>

<td>BBA</td>

<td>99</td>

</tr>
<tr align=center>

<td>Deepali</td>

<td>BBA</td>

<td>99</td>

</tr>

<tr align=center>

<td>Samreen</td>

<td>BBA</td>

<td>99</td>

</tr>

</table>

</center>

</body>

</html>
FORMS
<html>

<head>

<title>internal link demo</title>

</head>

<body>

<p align="center"><b><u>ADMISSION FORM</u></b></p>

<form>

NAME<input type="text"name="text",size="30"><br><br>

FATHER'S NAME<input type="text2"name="text2size="30"><br><br>

CITY<input type="text3" name="text3" value="Sonipat" size="20"><br><br>

MAJOR<input type="text4" name="text4" value="BBA" size="20"><br><br>

CONTACT NO.<input type="text5" name="text5" size="20"><br><br>

</form>

</body>

</html>
PASSWORD FIELD
AND
CHECKBOX FIELD
<html>

<head>

<title>FIELD DEMO </title>

</head>

<body>

<p align="center"><b><u>LOGIN FORM </u></b></p>

<form>

PASSWORD<INPUT type="password" name="text" size="15">

<br><br>

</form>

<h2>CHECK BOX DEMO <h2>

<p align="center"><b><u>SELECT YOUR FAVORITE </u></b></p>

<form>

<INPUT type="checkbox"name="option1"value="cricket" checked>

cricket<br><br>

<INPUT type="checkbox"name="option2"value="football" checked>

football<br><br>

<INPUT type="checkbox"name="option3"value="golf" checked>


golf<br><br>

<INPUT type="checkbox"name="option3"value="hockey" checked>

hockey<br><br>

</form>

</body>

</html>
RADIO BUTTON,
SUBMIT
AND RESET BUTTON
<html>

<head>

<title>Forms demo</title>

</head>

<body>

<p align="center"><b><u>ADMISSION FORM</u></b></p>

<form>

name<input type="text" name="text1" size="30"><br><br>

father's name<input type="text" name="text2" size="30"><br><br>

city<input type="text" name="text3" value="karnal" size="15"><br><br>

<INPUT type="radio" name="option"value="cricket" checked>CRICKET<br><br>

<INPUT type="radio" name="option"value="basketball" checked>basketball<br><br>

<INPUT type="radio" name="option"value="golf" checked>golf<br><br>

<INPUT type="radio" name="option"value="hockey" checked>hockey<br><br>

<select name="qul">

<option value="10th">10th

<option value="12th">12th

<option value="bca">bca
<option value="mca">mca

<input type="SUBMIT" value="SUBMIT">

<input type="RESET" value"RESET">

</form>

</body>

</html>

You might also like