31-Aug-25

Hyper Text Markup

Language

CSE505
Introduction to Web Technologies

Course Objective Amity School of Engineering & Technology

• To introduce the participants to

– Different HTML tags

– Cascading Style Sheets (CSS)

– Client - side Scripting with JavaScript and jQuery

– Introduction to PHP

1
 31-Aug-25

Amity School of Engineering & Technology

Session Plan

• HTML

• Frames, Images and Forms

Amity School of Engineering & Technology

References
• Web Developers Site found online at http://www.w3schools.com/

• World wide web found online at http://www.w3.org/

• GeeksForGeeks: https://www.geeksforgeeks.org/html-tutorial/

• Thomas Powell, “The Complete Reference HTML”, TATA McGraw-HILL

• Stevan Holzar, “HTML Black Book”, DreamTech

• Arman Danesh, “JavaScript Interactive Course”, TechMedia

2
 31-Aug-25

Amity School of Engineering & Technology

Course Pre-Requisites
• The participants should have the knowledge of any programming
language

• The participant should have the Knowledge of web technologies

Amity School of Engineering & Technology

Web Server
 Understands HTTP Protocol
 It intercepts HTTP request from the client
 Built on similar architecture as a classic client -server architecture
 Offers different HTTP services like GET, POST etc.
 Uses thread pools to service multiple concurrent requests

3
 31-Aug-25

Amity School of Engineering & Technology

Working of a Web Server

3. Cannot Resolve
DNS Server Locally? Resolve
(Local Network) from other DNS

2. Translate DNS 4. Returns IP Addr

Name to IP address 202.68.33.47

The
Internet
Web Server
(Internet)
1. User Invokes URL
http://my.mydomain.com/ my.mydomain.com
test.html 202.68.33.47

Web Browser

PC

Amity School of Engineering & Technology

Web Application – A Big Picture

Database

Server
Server
Internet
Database

Server
Server
Database
Intranet

Server Data Layer

Server

Desktop
(intranet)

Client Interface Web Server Layer Application Server Layer

4
 31-Aug-25

Amity School of Engineering & Technology

 The Web Application employs various technologies in different layers.

 Client Side Scripting

 Web browser
 HTML, XHTML, CSS
 Scripting Languages

 Server Side Scripting

 ASP, ASP.NET ( Microsoft Technology)
 Servlet and JSP ( Java Technology)

 Web Services
 XML, DTD, Schema, XML DOM, SOAP, WSDL

Amity School of Engineering & Technology

What is HTML and JavaScript and where are they used?

• HTML or Hyper Text Markup Language is the standard markup language

to create web pages

• JavaScript is the most popular scripting language used for client-side

scripting of web pages

• Both HTML and JavaScript are used for creating web interface for dynamic
contents(enterprise applications).

10

10

5
 31-Aug-25

Amity School of Engineering & Technology

Expectations

• At the end of the course the participants are expected to be proficient in

the following
– Creating web pages using HTML
– Creating GUI using HTML
– Performing client-side validation using JavaScript

11

11

Amity School of Engineering & Technology

WWW and HTML

• The World Wide Web is a way of accessing information over the medium of
Internet.
• It is an information sharing model that is built on top of the Internet.
• Communication on the web happens through HTTP. ( Hypertext Transfer
Protocol)
• Web information is stored in Web pages
• Web Pages are stored on Web servers
• Web clients view the pages in a Web browser.

12

12

6
 31-Aug-25

Amity School of Engineering & Technology

What is HTML?

• Hyper Text Markup Language

• Web pages are designed and developed using the mark up language like HTML.
• Tim Berners-Lee invented the World Wide Web and HTML
• HTML is
– Language is Simple
– Not dependent on Browser/Platform
– Case insensitive
– Uses tags which is different from other Languages
– User Interface medium

13

13

Amity School of Engineering & Technology

HTML tags and attributes

• The HTML instructions are called tags, and look like

– <TAG> ….. Text here…….. </TAG>
• Container tags :Tags that have starting as well as ending part.
– e.g.: <TITLE>Title of the Web Page </TITLE>
• Empty tags : Tags that do not have the closing part.
– e.g. <BR> , <HR>
• (HTML instructions + text to which the instructions apply)= HTML elements
• An attribute is an additional feature you can use to configure the element
• Attributes are optional. Element

• e.g.: <H1 ALIGN = “CENTER”> This is a heading </H1>

End tag
Attribute

Start tag
14

14

7
 31-Aug-25

Amity School of Engineering & Technology

Which of the following statements are TRUE about HTML ?

A HTML is compiled by browser

FALSE

B HTML is Case Sensitive

FALSE

C used to design and develop Web Pages

TRUE

D The HTML instructions are called Tags

TRUE

15

Amity School of Engineering & Technology

Structure of HTML Document

<HTML>
<HEAD> <!-- Head Section -->
<TITLE>Title of the Web Page </TITLE>
</HEAD>
<BODY> <!-- Body Section -->
<!-- Contents on Web Page -->
<H1> Contents </H1>
</BODY>
first.html (first.html.HTM)

</HTML>
 An HTML file can be created by using a simple text editor viz
notepad, textpad, etc.,
 HTML file must have an extension htm or html.

16

16

8
 31-Aug-25

Amity School of Engineering & Technology

Structure of HTML Document

<html>
<body>
<h1><font color="Green">Welcome To The Course HTML</font></h1>
<h2> HTML Is a Markup Language and Easy To Learn</h2>
</body>
</html>

17

17

Amity School of Engineering & Technology

HTML Document - Head

• Enclosed in <HEAD> </HEAD> tag
• Tags that can go in the document head

– <TITLE>Indicates the title of the document that is used as the window caption

– <LINK> specifies the relationship between the current document and other
documents.

– <META> element can be used to specify name/value pairs describing various

properties of the document

– <SCRIPT> specifies the client-side script.

– <STYLE> To Include CSS (Cascading Style Sheet)

18

18

9
 31-Aug-25

Amity School of Engineering & Technology

HTML Document - Meta

• <META> element uses name value pairs to provide meta information about the
document. It often provides descriptive information that is targeted by search engines.
The following are the use of this element.

• Ex: .
1. To have your page automatically reloaded every X seconds
<META HTTP-EQUIV=“REFRESH” CONTENT=X >
2.To have a different page automatically loaded after X seconds
<META HTTP-EQUIV=“REFRESH” CONTENT=“X; URL= http://address/file.html”>
3.To specify an expiration date for the page so that it will be reloaded after a certain date.
<META HTTP-EQUIV="Expires" CONTENT="Mon, 23 Sep 2024 01:21:00 GMT">

Meta Tags
19

19

Amity School of Engineering & Technology

HTML Document - Meta

4.To specify keywords for certain search services to use.

<META HTTP-EQUIV="Keywords" CONTENT="keyword1, keyword2, ...">

5.To specify a description of your page for certain search services to use
<META HTTP-EQUIV="Description" CONTENT=“Describe your site here....”
(this is concept is heavily used to implement SEO to improve the page ranking,
although sometimes it can be misused to add content as META which are not offered
as services but still used to improve the ranking.)

• <LINK> element is used in linking external CSS which will be discussed in later
chapters.
20

20

10
 31-Aug-25

Amity School of Engineering & Technology

HTML Document – Body

• Enclosed in <BODY> </BODY> tag.
• Some important attributes of the BODY tag <html>
<head>
– BGCOLOR = “color” / “#rrggbb”
<title>Background color</title>
– BACKGROUND = “url of the image” </head>
– TEXT = “color” / “#rrggbb” <body bgcolor="cyan">
– LINK = “color” / “#rrggbb” <h1> Contents </h1>
– ALINK = “color” / “#rrggbb” </body>
</html>
– VLINK = “color” / “#rrggbb”

– Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue
color values (RGB).
• #FF0000
• #0000FF
• #E2D974
21

21

Amity School of Engineering & Technology

HTML Document – Body - bgcolor

BGCOLOR:

<html>
<head>
<title>Amity University Gwalior</title>
</head>
<body bgcolor="Sky Blue">
<h1>Welcome To Introduction to Web Technologies</h1>
</body>
</html>

22

22

11
 31-Aug-25

Amity School of Engineering & Technology

HTML Document – Body - background

BACKGROUND:

<html>
<head>
<title>Amity University Gwalior</title>
</head>
<body background="about-1.jpg">
<h1> Welcome To AUMP</h1>
</body>
</html>

23

23

Amity School of Engineering & Technology

HTML Document – Body - Text

TEXT:

<html>
<head>
<title>Amity University Gwalior</title>
</head>
<body text="Green">
<h1> Welcome To AUMP</h1>
</body>
</html>

24

24

12
 31-Aug-25

Amity School of Engineering & Technology

HTML document – Body – link, vlink

LINK and VLINK

<html>
<head>
<title>Global Education Center</title>
</head>
<body Bgcolor=“blue" link=“Green" vlink=“Yellow">
<h1><a href=“http://sparsh/v1">Welcome To Sparsh</a></h1>
</body>
</html>

25

25

Amity School of Engineering & Technology

Formatting the web page

• <FONT> tag
– which specifies the font face and font size.
– Some common attributes are
• FACE specifies the font type.
• Defaults fonts like “Times New Roman”, “Arial”, and “Courier”
are available in all Systems.
• SIZE specifies the font size which can range from 1 to 7. The
default is 3. it can be relative value using + or -.
• COLOR- specifies the color of the font, contains hexadecimal
number value six characters length.
font.html (font.html.HTM)

<FONT FACE=“Helvetica, Arial” SIZE=“7” COLOR=“#FF0000”> The Written Word

</FONT>

26

26

13
 31-Aug-25

Amity School of Engineering & Technology

Formatting the web page

<html>
<body>
<p><font size=3 face="comic sans ms" color ="blue">
Mysore is Famous for Silk and Sandalwood</font></p>
<p><font size=5 face="Harrington" color="Red">
Bangalore is Famous for Gardens & IT
companies</font></p>
<p><font size =7 face="Harring, Arial" color=
"Green">
Mysore and Bangalore are cities of
Karnataka</font></p>
</body>
</html>

27

Amity School of Engineering & Technology

Which of the following statements are TRUE about HTML?

<SCRIPT> specifies the client side script.
A TRUE

<STYLE> specifies the client side script

B FALSE

C <FONT> specifies the background color

FALSE

D Background attribute of <BODY> set the back ground color

FALSE

28

14
 31-Aug-25

Amity School of Engineering & Technology

Inline and Block-Level Elements

• Elements inside the <BODY> tag are classified as block-level elements and inline
elements.
• Block-level elements usually begin on a new line.
• Generally, block-level elements may contain inline elements and other block-
level elements
• Examples for Block-level elements
– <H1><P><HR/>
• Examples for inline elements
– <FONT><I><BOLD>
<h> represent large heading
<p> Represent paragraph
29

29

Amity School of Engineering & Technology

Inline and Block-Level Elements

<html>
<head>
<Title>Inline and Block Level</Title>
</head>
<h1><u>Generic Courses</u></h1>
<h4><i>RDBMS</i><i>OOP</i><b>SE-IQS</b></h4>
<h1><u>Os&DB Course</u></h1>
<h4><p>HTML</p><p>Oracle</p><p>C++</p><p>Perl</p
> </h4>
</html>
30

30

15
 31-Aug-25

Amity School of Engineering & Technology

Linking Pages
• Used to link text with other documents
• <A></A>
– HREF
– NAME (bookmarks inside the page)
– TITLE (balloon help in IE)
– TARGET (Define where the linked document will be opened)

e.g.: <A href=“next.html”> Click here </A>

link.html (link.html.HTM)

• Used to link text with same documents

<BODY link=“blue” alink=“green” vlink=“red”>
<A name=“top”> Top of the Page </A>
……………………………………………………
<A href=“#top”>Top</A> </BODY>

31

31

Amity School of Engineering & Technology

Absolute and Relative Link

• You can reference a document within an HREF attribute in Two ways.
Absolute or relative.
• An absolute link is created when the href value is a fully qualified URL.

– Eg: <A HREF = "https://www.amity.edu/gwalior/"> Sparsh</A>

– <A HREF=“C:/html/project/index.html”>HTML project</A>

• A relative link is created when the destination href value is relative to the
location of the current webpage

– Eg: <A HREF = “../jsp/display.jsp”> Display details</A>

– <A HREF=“../project/index.html”>HTML project</A>

32

32

16
 31-Aug-25

Amity School of Engineering & Technology

Lists
• UnOrdered Lists - Bullets appear
<UL> </UL> tag
<LI> tag
– TYPE attributes specifies the type of bullet
– TYPE = “disc” | “circle” | ”square”

<UL TYPE = “disc”>

<LI> Item 1 O/P :
<LI> Item 2 •Item 1
•Item 2
<LI> Item 3
•Item 3
</UL>

unord_list.html (unord_list.html.HTM)

33

33

Amity School of Engineering & Technology

Lists
• Ordered Lists - serial numbers appear
<OL> </OL> tag
<LI> tag
– TYPE attribute controls the numbering scheme
• TYPE = 1 | A | a | I | i

<OL TYPE = “1”>

<LI> Item 1
<LI> Item 2
O/P : 1. Item 1
<LI> Item 3 2. Item 2
<OL> 3. Item 3

ord_list.html (ord_list.html.HTM)

34

34

17
 31-Aug-25

Amity School of Engineering & Technology

Lists
• Definition List - defines a definition list
<DL> </DL> tag
<DT> - Definition Term
<DD> - Definition Data
<dl>
<dt>Java</dt>
<dd>An Object Oriented Language</dd>
<dt>HTML</dt>
<dd>A Markup Language</dd>
</dl>

O/P: Java
An Object Oriented Language
HTML
A Markup Language def_list.html (def_list.html.HTM)

35

35

Amity School of Engineering & Technology

Which of the following statements are TRUE about HTML?

A <A> tag used to create hyperlinks

TRUE

B <link> tag used to create hyperlinks

FALSE

C <OL> tag used to create bulleted list

FALSE

D <UL> tag used to create numbered list

FALSE

36

18
 31-Aug-25

Amity School of Engineering & Technology

Tables

• Displays data in a tabular format.

• Helps in positioning the contents of the page in a more structured way.
• <TABLE> ….. </TABLE> : define a table.
• Some attributes
– ALIGN = LEFT | RIGHT | CENTER
– BORDER = n (Number of Pixels )
– BGCOLOR = “color” | “#rrggbb”
– CELLSPACING = n (Number of Pixels )
– CELLPADDING = n (Number of Pixels )
– WIDTH= % Of Parent | n (pixels)

37

37

Amity School of Engineering & Technology

Table structure
<TABLE BORDER=1> <!-- start of table definition -->
<TR> <!-- start of header row definition -->
<TH> first header cell contents </TH>
<TH> last header cell contents </TH>
</TR> <!-- end of header row definition -->
<TR> <!-- start of first row definition -->
<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
</TR> <!-- end of first row definition --> tab1.html (tab1.html.HTM)
<TR> <!-- start of last row definition -->
<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
</TR> <!-- end of last row definition –>
</TABLE> <!-- end of table definition -->

38

38

19
 31-Aug-25

Amity School of Engineering & Technology

Creating tables 1

<TABLE BORDER=“1” CELLSPACING=“1” CELLPADDING=“1” WIDTH=“30%”>

<CAPTION> Simple sample table </CAPTION>
<TR>
<TH>Heading1</TH>
<TH>Heading2</TH>
</TR>
<TR>
<TD>Cell 1</TD> Heading1 Heading2
<TD>Cell 2</TD>
</TR> Cell 1 Cell 2
<TR> Cell 3 Cell 4
<TD>Cell 4</TD>
<TD>Cell 5</TD>
</TR>
</TABLE>

39

39

Amity School of Engineering & Technology

Creating tables 2
<TABLE WIDTH="100%" BORDER=1 BGCOLOR=gray>
<TR ALIGN=CENTER >
<TD COLSPAN=2>This cell spans 2 columns!</TD>
<TD> Cell </TD></TR>
<TR ALIGN=CENTER >
<TD ROWSPAN=3>This cell spans 3 rows!!</TD>
<TD> Cell </TD>
<TD> Cell </TD></TR>
<TR ALIGN=CENTER >
<TD> Cell </TD>
<TD> Cell </TD></TR>
<TR ALIGN=CENTER >
<TD> Cell </TD>
<TD> Cell </TD> tab2.html (tab2.html.HTM)
</TR></TABLE>
This cell spans 2 columns! Cell
Cell Cell
This cell spans 3 rows!! Cell Cell
Cell Cell

40

20
 31-Aug-25

Amity School of Engineering & Technology

More table Attributes ( Self – Study )

<table width="60%" align="center"
cellspacing="3" border="1" bgcolor="#FFFFC1">
<tr bgcolor="cyan">
<td width="30%" align="center">Empno </td>
<td width="70%" align="center">Name</td>
</tr>
<tr>
<td>1000</td>
<td>Ashish Tripathi</td> tableattribute.html (tableattribute.html.HTM)
</tr>
<tr>
<td bgcolor="cyan">1001</td>
<td>Amit Sharma</td>
</tr>
41
</table>

41

Amity School of Engineering & Technology

More table Attributes ( Self – Study)

<TABLE Border=2 > <TR Align="Center">
<TR Align="Center"> <TD>56783297</TD>
<TD Colspan=6> Mini Statement <TD>27-Feb-2009</TD>
</TD>
</TR>
<TD>500.00</TD>
<TR Align="Center"> <TD>Withdraw</TD>
<TH> Account ID</TH> </TR>
<TH> Date</TH> <TR Align="Center">
<TH>Amount</TH> <TD>54576989</TD>
<TH>Deposit/Withdraw</TH> <TD>5-Mar-2009</TD>
</TR> <TD>100.00</TD>
<TR Align="Center">
<TD> Withdraw</TD>
<TD>54576989</TD>
</TR>
<TD>12-Jun-2009</TD>
<TD>3000.00</TD>
</TABLE>
<TD> Deposit</TD>
</TR>

42

42

21
 31-Aug-25

Amity School of Engineering & Technology

Embedding Images
• <IMG> tag
– SRC = “url”
– BORDER = n
– WIDTH=n (in pixels)
– HEIGHT=n (in pixels)
– ALT=“Alternate Text”
• Supports JPG, GIF and PNG image formats.
• ALT attribute was set to provide alternative text for browsers that did not display
images. ALT attribute can be used as a tool tip or placeholder information in image-
based browsers.

43

43

Amity School of Engineering & Technology

<IMG> tag attributes

Will be coded as
A stretched image
<IMG SRC ="joe.gif“ WIDTH="100" HEIGHT=“100">

With ALT attribute

<IMG SRC ="picture1.gif" ALT="Image does not exist“ >

44

44

22
 31-Aug-25

Amity School of Engineering & Technology

Images as link

• Images when put in the anchor tag act as hyperlinks

<A HREF=“Mypage.html"> <IMG SRC=“Littlejoe.jpg“ >
</A> Linkimg.zip

• Another form of clickable images is the idea of an image map.

Client Side Image Maps.
<A> element is used to enclose a specially marked <IMG> element.

Embed a demo

45

45

Amity School of Engineering & Technology

HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and
therefore cannot be used in the text. The most common character entities:
Result Description Entity Name
non-breaking space &nbsp;
< less than &lt;
> greater than &gt;
& ampersand &amp;
“ quotation mark &quot;
‘ apostrophe &apos;
entiti.html (entiti.html.HTM)
Some Other Commonly Used Character Entities
© copyright &copy;
® registered trademark &reg;
£ pound &pound;
¥ yen &yen;
46

46

23
 31-Aug-25

Amity School of Engineering & Technology

HTML Character Entities - DEMO

<html>
<head>
<title>Entity example</title>
</head>
<body bgcolor="cyan">
<h1>HTML</h1>
<!-- without using Entities -->
<h3>All html source code stars with <HTML> Tag</h3>
<!-- using Entities to dispaly <HTML> -->
<h3>All html source code stars with &lt;HTML&gt; Tag</h3>
&copy; &nbsp;&nbsp;AUMP &reg;&nbsp; ASET
</body>
</html>

47

Amity School of Engineering & Technology

Forms

• Used for creating Graphical User Interface (GUI)

• In a web application client interact through GUI

• FORM by itself really cannot do anything

• Forms become powerful when connected to a server application

• A single HTML page can have multiple forms

48

48

24
 31-Aug-25

Amity School of Engineering & Technology

Forms Example

49

49

Amity School of Engineering & Technology

Forms Example

50

50

25
 31-Aug-25

Amity School of Engineering & Technology

Forms
• Can be designed using <FORM></FORM> tag
<FORM NAME=“form1” ACTION="abc.asp" METHOD=GET>

<!– NAME is used for future manipulation of data by scripting language

ACTION indicates a program on the server that will be executed when this form is
submitted. Mostly it will be an ASP or a JSP script.
METHOD indicates the way the form is submitted to the server - popular options
are GET/POST -->

(form elements go here)

</FORM>

51

51

Amity School of Engineering & Technology

Form elements
• <INPUT> tag is used to add elements to the form.
– NAME = “controlname”
– TYPE = text / password / checkbox / radio/ submit / reset / button /
hidden / file
– VALUE
– MAXLENGTH
– SIZE form.html (form.html.HTM)

• All elements should be named by setting a unique value to the name attribute.
• The value attribute is used to set a default value for the control.

52

52

26
 31-Aug-25

Amity School of Engineering & Technology

Text Box/Password
• A text field can be added to the form by typing

– <INPUT TYPE=“TEXT" NAME=“txtcompany" VALUE=”INFOSYS” SIZE="10"

MAXLENGTH="15">

• A password field can be added to the form by typing

– <INPUT TYPE=“PASSWORD” NAME=“pwdLogin” SIZE=“50” MAXLENGTH=“12”>
– when the text is entered, stars or bullets appear instead of the typed letters.
• Attributes are

– VALUE is the default value loaded

– SIZE sets the size of the field in no. of characters.

– MAXLENGTH specifies max number of characters that can be entered to the control.

53

53

Amity School of Engineering & Technology

Form Demo
<html>
<body>
<form action=" ">
Username <input type="text" size=20 name="user"/></br>
Password <input type="password" size=20 name=“pwd"/>
</form>
<p><b>Note:</b> In password fields, the browser displays asterisks
or bullets instead of characters.</p>
</body>
</html>

54

54

27
 31-Aug-25

Amity School of Engineering & Technology

Text Area
• Multiline text input
– <TEXTAREA NAME=“feedback” ROWS=“3” COLS=“40”>
Default text goes here
</TEXTAREA>
• ROWS is the number of rows displayed.
• COLS is the no of characters per line.
• Default text is optional
• Dose not have VALUE and MAXLENGTH attributes.
• The default text is to be put into <TEXTAREA> </TEXTAREA> tags

55

55

Amity School of Engineering & Technology

List Box ( Drop-down box)

<SELECT NAME=“Hobbies”>
<OPTION VALUE=“T”>Travel
<OPTION VALUE=“R” SELECTED>Reading
<OPTION VALUE=“S”>Sleeping
<OPTION VALUE=“W”>Walking
</SELECT>
• SIZE number of lines to display
• VALUE indicates what will be sent to the server
• SELECTED sets the default selected item
• MULTIPLE will allow multiple selection of items
– Eg: <SELECT NAME=“Hobbies” MULTIPLE SIZE=“3”>

56

56

28
 31-Aug-25

Amity School of Engineering & Technology

Check Box

<input type=checkbox name=Internet Banking Value=“IB" >Internet Banking

<input type=checkbox name=Debitcard Value=“Debit" checked>Debitcard
<input type=checkbox name=VISA Card Value=“Visa" >VISA Card

Used for multiple selection.

• VALUE indicates the value to be transmitted to the server.
• CHECKED sets the checkbox to be selected by default.
57

57

Amity School of Engineering & Technology

Radio Buttons
<INPUT TYPE="radio" NAME="output" VALUE="screen“ checked> Screen
<INPUT TYPE="radio" NAME="output" VALUE="printer">Printer

• Radio buttons with the same NAME are grouped together.

• Radio buttons are used for Single selection.

• Only one button can be selected in a group.

• VALUE data to be sent to the server.

• CHECKED will preselect the button.

58

58

29
 31-Aug-25

Amity School of Engineering & Technology

Hidden text field

<INPUT TYPE=“hidden” NAME=“userinformation” VALUE =“form1”>

• Not displayed to the user.

• Can be used to pass data from one form to another.
• Cannot be modified by the user
• So it must have a VALUE attribute set
• VALUE data to be sent to the server.
• Mainly used in server side programming.

59

59

Amity School of Engineering & Technology

File and Image

The File Control
– Available from HTML 4.0.
– This form control is used to upload a file to the server.
– <Input Type=“file” Name=“load”>
– It is possible to set maxlength and size values to file control.
– It’s Not suggested because the path name might be larger than the size
specified.
– The file form control is not supported by all browsers.
The Image Control.
– The image control creates a graphical version of submit button.
– <Input Type=“IMAGE” src=“sub.gif” alt=“submit to server”
Name=“flname”>

60

60

30
 31-Aug-25

Amity School of Engineering & Technology

Buttons
The Submit button
– Sends the form contents to the server when clicked
– By default only submit button can invoke the action page and send data to
server.
– <Input Type=Submit Name=cmdSubmit Value =“Submit”>
• The Reset button
– Resets all the form controls to the default state.
– <Input Type=Reset Name=cmdReset Value="Reset">.
• A button
– No predetermined action like submit or reset.
– Script should be written to make it work. (this will be covered in later
chapters)
– <Input Type=Button Name=cmdAdd Value=“Click Me">.

61

61

Amity School of Engineering & Technology

Form example

• To display the form elements in a visually appealing way,

put them into table cells as shown in the above form.
formdemo.html (formdemo.html.HT

62

62

31
 31-Aug-25

How to specify the path for submitting the

Amity School of Engineering & Technology

data from a html FORM to server side program ?

A Using action attribute of <form>

TRUE

B Using GET method

FALSE

C Using POST method

FALSE

D Using <table> tag

FALSE

63

Amity School of Engineering & Technology

Frames
• Divides a browser window into number of panes.
• Each frame may contain a different document.
• <FRAMESET> element defines a set of frames.
– Should preclude the <BODY> element.
– <FRAMESET> </FRAMESET>
• ROWS
• COLS
• <FRAME > element defines an individual frame
– NAME = “frame name”
– SRC=“url”
– SCROLLING = auto / yes / no
– NORESIZE
64

64

32
 31-Aug-25

Amity School of Engineering & Technology

Frames Demo

<html>
<frameset cols="50%,*">
<frame name="frame1" src="block_inline_level_1.html">
<frame name="frame2" src="html_structure.html">
</frameset>
</html>

65

65

Amity School of Engineering & Technology

Adding Frames
<HTML>
<!--comment: Two cols with 30% and 70% each -->
<FRAMESET COLS=“30%,*">
<!-- Comment: * is indicating the remaining space (here 70%) -->
<FRAME SRC=“Frame1.htm">
<FRAME SRC=“Frame2.htm">
</FRAMESET>
<HTML>
<!-- Comment: no need to use the <BODY> tag at all -->

66

66

33
 31-Aug-25

Amity School of Engineering & Technology

Nesting Frames
<HTML>
<FRAMESET COLS="40%,*">
<FRAMESET ROWS="35%,*">
<FRAME SRC="Cell1.htm">
<FRAME SRC="Cell2.htm">
</FRAMESET>
<FRAME SRC="Cell3.htm">
</FRAMESET>
</HTML>

67

67

Amity School of Engineering & Technology

Frame targeting
• Ensure frame naming
<FRAMESET COLS="*, 20%">
<FRAME NAME="Frame1” SRC="Cell_1.htm">
<FRAME NAME="Frame2” SRC="Cell_2.htm">
</FRAMESET>
• Set the TARGET attribute for one hyperlink. Here the target value is case sensitive.
<A HREF="file.htm" TARGET="Frame1">Link Text</A>
<A HREF="file.htm" TARGET="_top">Link Text</A>

• If the TARGET attribute is specified in the <A> tag then that target will be used.

68

68

34
 31-Aug-25

Amity School of Engineering & Technology

Frame Targeting continued..

Target Value Description

_blank Loads the link into a new blank window
_parent Loads the link into the immediate parent of the
document the link is in
_self Loads the link into the same window. (default)
_top Loads the link into the full body of the window.

69

69

Amity School of Engineering & Technology

Floating Frames (Inline Frames) Demo

• Floating Frames
• Floating frames are scrollable areas that appear in a HTML document. Unlike regular
frames they cannot be resized.
• Not attached to the sides of the browser.
– Acts similar to an embedded object.
– Occurs within the <BODY> . inframe.html (inframe.html.HTM)
– <IFRAME> </IFRAME> tag.
– <IFRAME SRC="bot.html" WIDTH=“450” HEIGHT=“400”></IFRAME>

70

70

35
 31-Aug-25

Amity School of Engineering & Technology

Floating Frames (Inline Frames) Demo

71

71

Amity School of Engineering & Technology

Summary

• HTML structure
• Different elements and attributes
• Creating tables
• Images as links and Image maps
• Interaction with the client using forms.
• Working with Frame and Framesets
• Working with Inline Frames.

72

72

36
 31-Aug-25

Amity School of Engineering & Technology

Text Formatting tags

Header Tags
– HTML has six level of headings.
– Displayed in larger and bolder fonts.
– Different level heading tags
• <H1> Heading 1 </H1>
• <H2> Heading 2 </H2>
• <H3> Heading 3 </H3>
• <H4> Heading 4 </H4>
• <H5> Heading 5 </H5>
• <H6> Heading 6 </H6>
The font size of the heading will go on decreasing from H1 to H6.

73

73

Amity School of Engineering & Technology

Text Formatting tags

• Paragraphs
– <P> </P> - used to create paragraphs.

• Line Breaks
– <BR> - to insert returns or blank lines in the document.
– e.g. :<P>This <BR> is a para<BR>graph with line breaks</P>

• Horizontal Lines
– <HR> - used to draw a horizontal line across the web page.
– e.g: <HR ALIGN = “right” WIDTH = “50%” NOSHADE >

74

74

37
 31-Aug-25

Amity School of Engineering & Technology

Text formatting tags Demo

Tag Description
<B>….</B> - Bold
<I>……</I> - Italic
phy.html (phy.html.HTM
<U>….</U> - Underline
<STRIKE>…</STRIKE> - Strikethrough
<TT>….</TT> - Typewriter (monospaced)
<CENTER></CENTER> - Centers the text on the screen.
<SUB>….</SUB> - Subscript
<SUP>….</SUP> - Superscript
<BIG>….</BIG> - Bigger font (one font size bigger)
<SMALL>….</SMALL> - Small font (one font size smaller)

75

75

Amity School of Engineering & Technology

mailto : Link
• mailto links allow people to send email directly from a web page.
• When the user clicks on the mailto link it opens in the Email client installed on the system.
(eg : Outlook Express)
• Eg: <A href="mailto:someone@gwa.amity.edu">Send a Mail</a>
• Mail can be sent to additional recipients either as carbon copies (cc) or blind carbon copies
(bcc).
• <a href="mailto:one@gwa.amity.edu?cc=oneelse@gwa.amity.edu">Email Us</a>
• The subject and body can be added to the email using body and subject parameters. Each
parameter should be separated using ‘&’.
• Eg:<a href="mailto:someone@gwa.amity.edu?CC=me@gwa.amity.edu&
Subject=Please Try&Body=Hi%20All%20%0DI How are you">this link</a> email.html (email.html.HTM)
• To create spaces between words you will have to use hex code - for example '%20' between
each word, and to create new lines will mean adding '%0D'.

76

76

38