HTML Practical

DEPARTMENT OF INFORMATION
TECHNOLOGY
Institutional Practical Training (IPT)

Practical File
Subject: Summer Institutional Training
CHANDIGARH ENGINEERING COLLEGE

(LANDARN)
Pankaj sharma 2237422

PRACTICAL – 1
AIM :- Write a program to Add Image and Display Paragraph of NR NARAYAN

MURTY.
THEORY :-
The html <img> tag is used to embed an image in a web page . image are no
technically inserted into a web page ; image are linked to web page . the <img> tag
creates a holding spaces for the referenced image .
The image tag is empty, it contain attributes only , and does not have a closing tag .
The <img> tag has two required attributes :
• Src -specific the path to the image

• Alt - specific an alternate text for the image.
Syntax: <img src =”url” alt =”alternate text “>
The html <p> element defines a paragraph .
A paragraph always starts on a new lines , and browser automatically add some white
space (a margin ) before and after a paragraph.
Html display we cannot be sure how html will be displayed. Large or small screens and
resized window will create different results.
<p>this is paragraph </p>
<P>this is another paragraph </p>.

Source Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Narayan Murty</title>
</head>
<body>
<img src="https://th.bing.com/th/id/OIP.LcpOfrLBHpzNAKzL045CmwHaFj?pid=ImgDet&rs=1"
<p>Nagavara Ramarao Narayan murty,commonly refered to as narayan murty , is an Indian

IT industrial
and the co-founder of Infosy. He is known for his contributon to the outsourcing
business model
and for his philanthropic work . Murthy has been honored with numerous awards for
his achievements,
including the padma shri amd padma Vibhushan .He is also a member of the advisory
boards of several
educational and philanthropic institutions .</p>
</body>
</html>
OUTPUT :-

Software Requirements
• Visual Studio Code

• Web Browser
Hardware Requirements
• Intel I5 11th gen and above processor

• Basic computer components

PRACTICAL -2
Aim: Write a program to create a Hyperlink tags.
Software Requirements
• Visual studio code
• Web Browser
Hardware Requirements
• Intel I5 11TH gen and above processor
• Basic computer components
THEORY:
<font>
The <font> tag in HTML plays an important role in the web page to create an attractive and readable web
page. The font tag is used to change the color, size, and style of a text.
<img>
The <img> tag has two required attributes:
• src - Specifies the path to the image

• alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
<a> anchor tag
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
Source Code:
<html>
<head>
<title>Workgroup</title>
</head>
<body bgcolor="sky blue" alink="blue" vlink="red">
<font face="times new roman" size="12">
<h3>THIS IS MY FIRST WEBSITE </H3>

<h4>Here we use img tag and hyperlink tag </h4>
<A HREF="C:\Users\Public\Pictures\Sample Pictures/Penguins.jpg">
<img
src="https://t3.ftcdn.net/jpg/05/48/56/38/240_F_548563894_s5tGFJjPhc7lp5uG4iJkR77QbgvrKr9e
.jpg" height=200 width=200 vspace=50 hspace=50 border=2>

</a>
<A HREF="C:\Users\Public\Pictures\Sample Pictures/Tulips.jpg">
<img src="https://i.pinimg.com/originals/39/d1/dc/39d1dc4196f55e40dac7a1cadf702b6f.jpg"
height=200 width=200 vspace=50 hspace=50 border=2>
</a>
<A HREF="C:\Users\Public\Pictures\Sample Pictures/Lighthouse.jpg">
<img src="https://wallpapers.com/images/featured/nature-2ygv7ssy2k0lxlzu.webp" height=200
width=200 vspace=50 hspace=50 border=2>
</A>
</font>
</body>
</html>
Output:
Outcomes:
• Student will learn how to insert image in webpage using img tag.
• Student will learn how to insert hyper link using anchor tag.

PRACTICAL -3
Aim: Write a program to make a Ordered and Unordered list .

Theory:
To create an ordered list in html , we can use the ‘<OL>’ tag .within the ‘<OL>’tag , we can use the ‘<li>’
Tag to create a each list item , Here’s an example :
Html
<OL>
<li>First item</li>
<li>second item</li>
<li>third item </li>
</OL>
This will create a bulleted list with three items.
To create an unordered list in html , we can use the ‘<UL>’tag. Within the ‘<UL>’tag ,we can use the ‘<li>’
Tag to create each list items ,Here’s an example :
Html
<UL>
<li>First item</li>
<li>second item</li>
<li>third item </li>
</UL>
This will create a bulleted list with three items.

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered list and Unordered list</title>
</head>
<body>
<h1>Ordered list</h1>
<h2>List of Furit</h2>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Grapes</li>
</ol>
<h1>Unordered list</h1>
<h2>List of Furit</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Grapes</li>
</ul>
</body>
</html>
Output:

Outcomes:
• Student will learn how to insert basic structure tag i.e <B>,<I>,<U>,<HR>,<BR>
in webpage.
• Student will learn how to insert heading tags in webpage i.e <H1> to <H6>.
• Student will learn how make paragraph in webpage using <p> tag.

PRACTICAL - 4
Aim: Write a program to create a Table.
Theory:
<table>
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines
a table cell.
<UL>
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<OL>
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Source code:
<!DOCTYPE html>
<html>
<head>
<style>table,th,td {
border: 1px solid black;
border-collapse:collapse ;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width: 70%">
<tr>
<th>name</th>
<th>Age</th>

<th>salary</th>
</tr>
<tr>
<td>Kartik</td>
<td>19</td>
<td>20,000</td>
</tr>
<tr>
<td>shivam</td>
<td>20</td>
<td>35,000</td>
</tr>
<tr>
<td>pankaj</td>
<td>21</td>
<td>40,000</td>
</tr>
</table>
</body>
</html>
Output:

Outcomes:
• Student will learn how to insert table using <TD>,<TR>,<TH>in webpage.
• Student will learn how to merge colums,rows in table.
• Student will learn how ordered and unordered list.

PRACTICAL - 5
Aim: Write a program to create a registration form.
Theory:
<form>
The HTML <form> element is used to create an HTML form for user input.
The <form> element is a container for different types of input elements, such as: text fields, checkboxes,
radio buttons, submit buttons, etc.
<input>
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
<label>
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label
when the user focuses on the input element.
<checkbox>
he <input type="checkbox"> defines a checkbox.
<submit>
The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
<radio>
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Source code:
<html>
<head><title>Pankaj sharma(2237422)</title></head>
<body bgcolor=white>
<h3>
<center>
In this Webpage we create simple form
</center>
<form><fieldset>
<legend> Personal Detail</legend> <p>
<label> Salutation</label>
<select name ="Salutation">
<option>Name
<option>Mr
<option>Mrs
</select></p>
<p><label > Full name <input name = " First name "></label ></p>
<p><label > Last name <input name = " Last name " ></label ></p>
<p>Gender<br><label>
<input type = "radio" name="Gender" value = "Male" /> Male</label>
<input type = "radio" name="Gender" value = "Female" /> Female</label>
</p>
<p><label> Email :<input type ="email" name = "email" />
</label></p>
<p><label>DOB : <input type ="Date" name = "date of Birth" />
</label></p>
<p><label>
Address : <textarea name="address" cols="30" rows="3" ></textarea>
</label></p>
<p><label >
Choose : Language</label>
<ul style="name">
<li>English<input type="checkbox" name ="language" value="English" />
<li>Hindi<input type="checkbox" name ="language" value="Hindi" />
<li>punjabi<input type="checkbox" name ="language" value="Urdu" />
</ul>
<button type="submit">Submit</button>
<holdset>
</holdset>
</form>
</body>
</html>
Output:

Outcomes:
• Student will learn how to create form in webpage.
• Student will learn how use button , label, radio etc in form.

HTML Practical

Uploaded by

Document Information

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

HTML Practical

Uploaded by

Copyright:

Available Formats

DEPARTMENT OF INFORMATION

Institutional Practical Training (IPT)

Subject: Summer Institutional Training

CHANDIGARH ENGINEERING COLLEGE

Pankaj sharma 2237422

AIM :- Write a program to Add Image and Display Paragraph of NR NARAYAN

The <img> tag has two required attributes :

• Src -specific the path to the image

Syntax: <img src =”url” alt =”alternate text “>

The html <p> element defines a paragraph .

<p>this is paragraph </p>

<P>this is another paragraph </p>.

Pankaj sharma 2237422

<p>Nagavara Ramarao Narayan murty,commonly refered to as narayan murty , is an Indian

Pankaj sharma 2237422

• Visual Studio Code

• Intel I5 11th gen and above processor

Pankaj sharma 2237422

Aim: Write a program to create a Hyperlink tags.

The <img> tag has two required attributes:

• src - Specifies the path to the image

<a> anchor tag

<h3>THIS IS MY FIRST WEBSITE </H3>

Pankaj sharma 2237422

Pankaj sharma 2237422

Aim: Write a program to make a Ordered and Unordered list .

Tag to create a each list item , Here’s an example :

<li>third item </li>

This will create a bulleted list with three items.

Tag to create each list items ,Here’s an example :

<li>third item </li>

This will create a bulleted list with three items.

Pankaj sharma 2237422

Pankaj sharma 2237422

Pankaj sharma 2237422

Aim: Write a program to create a Table.

The <table> tag defines an HTML table.

The list items will be marked with numbers by default:

Pankaj sharma 2237422

Pankaj sharma 2237422

Pankaj sharma 2237422

Aim: Write a program to create a registration form.

The HTML <input> element is the most used form element.

The <label> tag defines a label for many form elements.

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Pankaj sharma 2237422

Pankaj sharma 2237422

You might also like