CHANDIGHARH GROUP OF COLLEGES
TECHNICAL CAMPUS
JHANJERI , MOHALI
INSTITUTIONAL PRACTICAL TRAINING
(ECE DEPARTMENT)
Submitted by : Submitted to :
Lakshay Arora Ms. Kamna
1816669 A.P , CSE
B.Tech (ECE) – 3rd Sem
PRACTICAL 1
AIM : INTRODUCTION TO HTML
WHAT IS HTML?
HTML stands for Hypertext Markup Language. It is used to create a document that contains
text or creating webpages. Tim Breners Lee is the founder of HTML in 1991.
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2004
Syntax of HTML :-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>my first paragraph.</p>
</body>
</html>
Document structure tag :-
<!DOCTYPE html> : It explains the lastest version of the HTML
<html > : It is known as the root element of the webpage and at time also known as
wrapper
Syntax: <html> Statements... </html>
<Head> : it consists of the title page , metadata (data inside data).
Syntax: <head> Statements... </head>
<body> : It contains all the data in which a webpage as a certain amount of text which
are linked to each other.
Syntax: <body> Statements... </body>
<title > : It is used to define the title of html document.
Syntax: <title> Statements... </title>
HTML editor :- Notepad
Various features of HTML :
It is user friendly language which is easy to learn.
It is a platform independent
Images, video, and audio can be easily added
It is a markup language
It is easy implementation which are helpful in creating webpages and websites
It is supported by web browers
HTML is integrated with other language like Java Script,CSS so no..
Advantages of HTML:
1. First advantage it is widely used.
2. Every browser supports HTML language.
3. Easy to learn and use.
4. It is by default in every windows so you don't need to purchase extra software.
Disadvantages of HTML:
1. It can create only static and plain pages so if we need dynamic pages then HTML
is not useful.
2. Need to write lot of code for making simple webpage.
3. Security features are not good in HTML.
4. If we need to write long code for making a webpage then it produces some complexity.
HTML tags :
HTML contains lots of predefined tag. Some of them are described below:
Content container tag:
Heading tag: It is used to define the heading of html document.
Syntax:
<h1> Statements... </h>
Paragraph tag: It is used to define paragraph content in html document.
Syntax:
<p> Statements... </p>
Bold tag: It is used to specify bold content in html document.
Syntax: <b> statements..</b>
Italic tag: It is used to write the content in italic format.
Syntax:
<i> Statements... </i>
Small (text) tag: It is used to set the small font size of the content.
Syntax:
<small> Statements... </small>
Underline tag: It is used to set the content underline.
Syntax:
<u> Statements... </u>
Deleted text tag: It is used to represent as deleted text. It cross the text content.
Syntax:
<strike> Statements... </strike>
Anchor tag: It is used to link one page to another page.
Syntax:
<a href="..."> Statements... </a>
List tag: It is used to list the content.
Syntax:
<li> Statements... </li>
Ordered List tag: It is used to list the content in a particular order.
Syntax:
<ol> Statements... </ol>
Unordered List tag: It is used to list the content without order.
Syntax: <ul> Statements... </ul>
Comment tag: It is used to set the comment in html document. It is not visible on the
browser.
Syntax: <!-- Statements... -->
Scrolling Text tag: It is used to scroll the text or image content.
Synatx:
<marquee>statements..</marquee>
Center tag: It is used to set the content into the center.
Syntax:
<center> Statements... </center>
Font tag: It is used to specify the font size, font color and font-family in html document.
Syntax:
<font> Statements ... <font>
Line break tag: It is used to break the line.
Syntax: <br>
Image tag: It is used to add image element in html document.
Syntax: <img>
Tables Tags:
Table tag is used to create a table in html document.
Table tag:
Syntax:
<table> Statements... </table>
Tr tag: It is used to define row of html table.
Syntax:
<tr> Statements... </tr>
Th tag: It defines the header cell in a table. By default it set the content with bold and
center property.
Syntax:
<th> Statements ... <th>
Td tag: It defines the standard cell in html document.
Syntax:
<td> Statements ... <td>
Input Tags:
Form tag: It is used to create html form for user.
Syntax:
<form> Statements ... <form>
Submit input tag: It is used to take the input from the user.
Syntax:
<input>
Dropdown option tag: It is used to select an option froma drop-down list.
Syntax:
<option> Statements ... <option>
Radio button tag: It is used to select only one option from the given options.
Syntax: <input>
PRACTICAL 2
AIM : Create a static webpage using table tages of HTML
<!doctype html>
<html>
<head><title>table</title>
<body>
<h2><center><I><U>LIBRARY BOOK ISSUING STATUS</U></I></center></h2>
<center><table border="1" width="60%" height="50%">
<tr>
<th><b>S.No</b></th>
<th><b>NAME OF STUDENT</b></th>
<th><b>FATHERS NAME</b></th>
<th><b>MOTHERS NAME</b></th>
<th><b>PHONE NUMBER</b></th>
<th><b>EMAIL ID</b></th>
<th><b>BOOKS ISSUED</b></th>
</tr>
<tr><td>1.</td>
<td>Mohit Verma</td>
<td>Santosh Verma</td>
<td>Mamta Verma</td>
<td>7026084565</td>
<td>mohitv111@gmail.com</td>
<td>one</td>
</tr>
<tr><td>2.</td>
<td>Gurjeet singh</td>
<td>Parampreeet singh</td>
<td>Sukhpreet kaur</td>
<td>9663807754</td>
<td>guri098@gmail.com</td>
<td>two</td>
</tr>
<tr>
<td>3.</td>
<td>Vishal Malhotra </td>
<td>Deep malhotra</td>
<td>Kiran malhotra</td>
<td>7890566807</td>
<td>vishalmalhotra99@gmail.com</td>
<td>one</td>
</tr>
<tr><td>4.</td>
<td>Divya Sharma</td>
<td>R k Sharma</td>
<td>Radha Devi</td>
<td>9848360001</td>
<td>divya@gmail.com</td>
<td>all clear</td>
</tr>
<tr><td>5.</td>
<td>Deepak Kumar</td>
<td>Ashwani Kumar</td>
<td>Tripta kumar </td>
<td>766830574</td>
<td>deepakumar23@gmail.com</td>
<td>two</td>
</tr>
<tr><td>6.</td>
<td>Harjot singh</td>
<td>Satapal singh </td>
<td>Gurmeet kaur</td>
<td>76605570173</td>
<td>jotsingh78@gmail.com</td>
<td>all clear</td>
</tr>
</body>
</html>
OUTPUT :
PRACTICAL 3
AIM : Create a static webpage which includes all the text formatting tags of
html.
<!doctypehtml>
<html>
<head><title>IMAGE</title>
<head>
<body>
<h2><u>TEXT FORMATTING</u> </h2>
<p>This is a short paragraph</p>
<p>
This is a longer paragraph<br>
We're using page breaks<br>
to have it display<br>
on four times.
</p>
<p>This is <b>Bolded text</b></p>
<p>This is <storng>Important text</storng></p>
<p>This is <i>Italic text</i></p>
<p>This is <u>Underlined text</u></p>
<p>This is <em>Emphasized text</em></p>
<p>This is <mark>Marked text</mark></p>
<p>This is <small>Small text</small></p>
<p>This is <del>Deleted text</del></p>
<p>This is <ins>Inserted text</ins></p>
<p>This is <sub>Subscript text</sub></p>
<p>This is <sup>Superscript text</sup></p>
</body>
</html>
OUTPUT :
PRACTICAL 4
AIM : Create a static webpage using list tags of html
<!doctype html>
<html>
<head><title>Lists</title>
<body>
<font size="5"><p><b><u>General Display of an Unordered
list</U></b></p></font>
<h1><u><I>VARIOUS BRANCHES IN ENGINEERING </I></u></h1>
<ul style="list style type:Disc"><font size="5">
<li>ECE</li>
<li>CSE</li>
<li>CE</li>
<li>ME</li></UL>
<hr color="black">
<p><b>General Display of an Ordered list</b></p>
<h2><u><I>DETAILED EXPLANATION ABOUT THESE BANCHES</I></u></h2>
<ol type:"1."><font size="5">
<li><B>ECE :</B>this gives a complete detailed knowledge of electronics.</li>
<li><b>CSE :</b>this branch includes knowlegde of working procedure with various
programming languges and computer fundamentals. </li>
<li><b>ME :</B>in this , you can attain a great knowlege about how the different large scale
mnufacturing occurs.</li>
<li><b>CE :</b>By choosing this branch, you can get a berief knowledge how the huge
infrastructure are maintained.</li></ol></body></html>
OUTPUT:
PRACTICAL 5
AIM : Create a static webpage using image and link tag of html
<!doctypehtml>
<html>
<head><title>Learning</title>
</head>
<body >
<h2><center><u>Creating various LINKS and IMAGES on a
Webpage</u></center> </h2>
<p>In this tutorial we will learn how to make a link and add an image to your webpage.<br>In
order to create a link we use" <a> " tags and href is attribute to assign an address of
link.<br>Now, to add an image to the webpage, we use "<img>" tags and "src" attribute to
assign an address of the image.</p><br>
<b>here's an example of an image and a link</b></p>
<br>
<a href="www.google.com"> THIS IA A LINK </a>
<center><img src="C:\Users\Dell\Desktop/29.jpg" style="width:50%; height:65%; border:2;">
</img></center>
</body>
</html>
OUTPUT:
PRACTICAL 6
AIM : Create a static webpage using image and link tag of html
<!doctype html>
<html>
<head><title>Sign up</title></head>
<body>
<font size="6">
<img align="right" src="C:\Users\Dell\Desktop\download.jpg" width="150"
height="100"><br>
<b><center>            
<u>EASTMAN CAST AND FORGE LTD.<br></u></font>
         <u>G.T. Road, Near Airport NH-1,
Ludhiana, Punjab 141120</u></center></b>
<hr color="black">
<h2><center><u>Fill the below form for registration </u></center></h2>
<form align="center">
<font >
<h2>Basic Details</h2>
<table align="right" border="1" >
<tr>
<th><a href="#">PHOTO</a></th>
</tr>
<table></center><br><center>
<b>First Name</b><br>
<input type="text" name="First Name"><br>
<br><b>Last Name</b><br>
<input type="text" name="Last Name"><br>
<br><b>Age</b><br>
<input type="text" name="age"><br>
<br><b>Contact</b><br>
<input type="text" name="Contact"><br>
<br><b>Gender</b><br>
<input type="radio" name="Gender" value="male">male
<input type="radio" name="Gender" value="female">female<br><br>
<b>Qualification</b><br>
<input type="radio" name="Course" value="10">B.tech
<input type="radio" name="Course" value="10+2">M.tech<br>
<input type="radio" name="Course" value="Bachelor's">BCA
<input type="radio" name="Course" value="Master's">B.com<br>
<br><b>Address</b><br>
<input type="text" name="Address"><br>
<br><b>Experience</b><br>
<input type="text" name="Experience"><br>
<br><hr color="black">
<p>I hereby declare that the information provided above will be right as per my knowledge and I
will be dedicated to all the disciplines and rules as decided by the company.</p>
<p><b>Signature of Employee</b>
              &n
bsp         
<b>Signature of Head Manager</b></p>
<br>
<input type="submit" value="submit">
</form>
<footer>
<br><p><b>In order to get more details about our company , visit our official site given
below.<br></b></p>
<a href="#">www.Eastmancastaandforge.com</a>
</footer></center>
</body>
</html>
OUTPUT:
