Scribd
Upload
171 views20 pages

Introduction To HTML

This document provides instructions for an HTML practical assignment. It describes creating a static webpage using various HTML tags. It begins with an introduction to HTML that defines HTML, lists its features and advantages/disadvantages. It then discusses various HTML tags for text formatting, lists, tables, and images. It provides code examples to create webpages using these tags. The document aims to teach the basics of HTML through practical examples.

Uploaded by

Lakshay Arora
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
171 views20 pages

Introduction To HTML

This document provides instructions for an HTML practical assignment. It describes creating a static webpage using various HTML tags. It begins with an introduction to HTML that defines HTML, lists its features and advantages/disadvantages. It then discusses various HTML tags for text formatting, lists, tables, and images. It provides code examples to create webpages using these tags. The document aims to teach the basics of HTML through practical examples.

Uploaded by

Lakshay Arora
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/ 20

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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<u>EASTMAN CAST AND FORGE LTD.<br></u></font>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<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>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&n
bsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<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:

You might also like