Phpmodule 1

Module 1- HTML
Introduction
Internet is a global communication system that links together thousands of
individual networks. It allows exchange of information between two or more
computers on a network.
WWW stands for World Wide Web. A technical definition of the World
Wide Web is: all the resources and users on the Internet that are using the
Hypertext Transfer Protocol (HTTP). The World Wide Web is the universe of
network-accessible information, a representation of human knowledge. In
simple terms, The World Wide Web is a way of exchanging information
between computers on the Internet, tying them together into a vast collection of
interactive multimedia resources.
Web consists of billions of clients and server connected through wires and
wireless networks. A desktop computer requesting for information is termed
as Client. The computer serving information from a central location is
termed as server.
Figure 1: Client Server Architecture
The web clients make requests to web server. The web server receives the
request, finds the resources and returns the response to the client. The client
uses web browser to send request to the server. When a server answers a
request, it usually sends some type of content (file) to the client. The server
often sends response to the browser.
Files that travel across the largest network in the world, the Internet, and carry
information from a server to a client that requested them are called Web Pages.
The person who develops these web pages is called Web Developer.
Web Programming Using PHP 1

Module 1- HTML
Web Pages are created using HTML (HyperText Markup Language) syntax.
These pages must be organized and stored at a central computer (server
computer). The organization of web pages into directories and storing these files
on the server is called Website creation.
A website is a collection of static files (webpages) such as HTML pages,
images, graphics etc. A Web application is a web site with dynamic
functionality on the server. Dynamic functionality can be added using a high
level language which supports server side programming. Examples for server
side programming languages are Java, PHP, C#, Python etc. Google, Facebook,
Twitter are examples of web applications.
HyperText Markup Language (HTML)
The language used to develop web pages is called HyperText Markup Language
(HTML). HTML is the language interpreted by a Browser. Web Pages are also
called HTML documents. HTML is a set of special codes that can be embedded
in text to add formatting and linking information. HTML is specified as TAGS
in an HTML document.
Tags are instructions that are embedded directly into the text of the document.
An HTML tag is a signal to a browser that it should do something other than
just throw text up on the screen. By convention all HTML tags begin with an
open angle bracket (<) and end with a close angle bracket (>).
HTML tags can be of two types:
Paired tags: A tag is said to be a paired tag if it, along with a companion tag,
flanks the text. For example the <B> tag is a paired tag. The <B> tag with its
companion tag </B> causes the text contained between them to be rendered in
bold. The effect of other paired tags is applied only to the text they contain. In
paired tags, the first tag (<B>) is often called the opening tag and the second
tag (</B>) is called the closing tag. The opening tag activates the effect and the
closing tag turns the effect off.

Module 1- HTML
Singular Tags: The second type of tag is the singular or stand-alone tag. A
stand-alone tag does not have a companion tag. For example <BR> tag will
insert a line break. This tag does not require any companion tag.
The Structure of an HTML program
Every HTML program has a rigid structure. The entire web page is enclosed
within <HTML> </HTML> tags. Within these tags two distinct sections are
created using the <HEAD> </HEAD> tags and the <BODY> </BODY> tags.
These sections are described below.
Document Head
Information placed in this section is essential to the inner workings of the
document and has nothing to do with the content of the document. With the
exception of information contained within the <TITLE></TITLE> tags, all
information placed within the <HEAD> </HEAD> tags is not displayed in the
browser. The HTML tags used to indicate the start and end of the head section
are:
<HEAD>
<TITLE>... </TITLE>
</HEAD>
Document Body
The tags used to indicate the start and end of the main body of textual
information are:
<BODY>... </BODY>
Page defaults like background color, text color, font size, font weight and so on
can be specified attributes of the <BODY> tag. The attributes that the <BODY>
tag takes are:
Attributes Description
alink Color of text for selected hyperlinks
background Image to be used a background

Module 1- HTML
bgcolor Background color

link Color of text for unvisited hyperlinks
text Foreground color of text
vlink Color of text for visited hyperlinks
So general structure of an HTML page is

<HTML>
<HEAD>
<TITLE>... </TITLE>
</HEAD>
<BODY>
…………………..
</BODY>
</HTML>
Text formatting tags

Paragraphs
The <P> tag in HTML defines a paragraph. These have both opening and
closing tag. So anything mentioned within <P> and </P> is treated as a
paragraph. Most browsers read a line as a paragraph even if we don’t use the
closing tag i.e, </P>, but this may raise unexpected results. So, it is better to use
the closing tag.
Line breaks
When text need to start from a new line and not continue on the same line, the
<BR> tag should be used. This tag simply jumps to the start of the next line.
Emphasizing text in a web page
Document pages are usually divided into sections and subsections which need
to be emphasized. HTML provides certain Heading styles and horizontal
rules which helps break text into logical sections with visual appeal.
Heading styles

Module 1- HTML
HTML supports six different levels of headings. The highest-level header

format is <H1> and lowest level is <H6>. All the styles appear in BOLD and
size of the heading depends on the level chosen. ie <H1> to <H6>.
Drawing Lines
The tag <HR> draws lines and horizontal rules. This tag draws a horizontal line
across the whole page, wherever specified. The attributes of <HR> tag are:
Attributes Description
ALIGN Specifies the alignment of the horizontal rule, which is by
default, aligned to the center of the screen. Possible values
are LEFT , RIGHT and CENTER
size Specifies the height of the horizontal rule in pixels or %
noshade Removes the usual shading effect that most browsers
display.
width Specifies the width of the horizontal rule in pixels or %
Example 1: <P>,<BR> ,<H1> and <HR> tag demo

<html>
<head>
<title>HTML br Tag</title>
</head>
<body>
<h1 align="center">THIS IS MY FIRST HTML
DOCUMENT....</h1>
<hr width="50%" size= 10% noshade align=center>
<h2>Heading Level 2</h2>

Module 1- HTML
<p>This is a sample paragraphbefore the line break<br />

and this after the line break.</p>
</body>
</html>
Output
Text Styles
Making text Bold or Strong: We can make the text bold using the <B> tag.
The tag uses both opening and closing tag. The text that needs to be made bold
must be within <B> AND </B> tag.
We can also use the <STRONG> tag to make the text strong, with added
semantic importance. It also opens with <STRONG> and ends with
</STRONG> tag.
Making text Italic or emphasize: The <I> tag is used to italicise the text. It
opens with <I> and ends with </I> tag.
The <EM> tag is used to emphasize the text, with added semantic importance.
It opens with <EM> and ends with </EM> tag.

Module 1- HTML
Making a text Subscript or Superscript: The <SUP> element is used to

superscript a text and <SUB> element is used to subscript a text. They both
have opening and a closing tag.
Larger Text : The content of the <BIG>...</BIG> element is displayed one
font size larger than the rest of the text surrounding it.
Smaller Text : The content of the <SMALL>...</SMALL> element is
displayed one font size smaller than the rest of the text surrounding it.
Centering text ,images etc: The HTML <CENTER> is a block level element
which contains both block level and inline contents within it. The content
written between the <CENTER>… </CENTER> elements will be displayed
at the middle of the page.
<MARQUEE> tag
The <MARQUEE> tag in HTML is used for creating scrolling text or image in
a webpages. It scrolls either from horizontally left to right or right to left, OR
vertically top to bottom or bottom to top. The marquee element comes in pairs.
It means that the tag has opening and closing elements.
Syntax : <MARQUEE>....</MARQUEE>
Attributes of <MARQUEE> tag are
Attributes Values Description
bgcolor Color Name Define the background color of the marquee.
direction Top, Down, Define the direction of scrolling the content
Left, Right
loop Number Specifies how many times content moves.
The default value is infinite.
height px or % Define the height of marquee
width px or % Define the width of marquee
hspace px Specify horizontal space around marquee
vspace px Specify vertical space around marquee
behavior scroll, slide It facilitates user to set the behavior of the
and alternate marquee to one of the three different types
scrolldelay Number It defines scroll delay in seconds.
scrollamount Number It defines scroll amount in number.

Module 1- HTML
Example 2: <B>, <SUB> and <MARQUEE> tag demo

<html>
<head>
<title>HTML br Tag</title>
</head>
<body>
<h1 align="center">THIS IS A SAMPLE DOCUMENT....</h1>
<hr width="50%" size= 10% noshade align=center>
<MARQUEE BGCOLOR=PINK BEHAVIOR=ALTERNATE LOOP=5
HEIGHT=25%>
<H1>THIS IS A MOVING TEXT </H1>
</MARQUEE>
<p> <B>This is the 2<SUP>nd</SUP> program
</p>
</body>
</html>
Output

Module 1- HTML
Inserting images in a web page

Earlier, the webpages used to comprise of only texts, which made them appear
quite boring and uninteresting. Later the ability to embed images on web pages
was added for users. Thus the pages can be made attractive.
The <IMG> tag is used to add images on a webpage. The <IMG> tag is an
empty tag, which means it can contain only a list of attributes and it has no
closing tag.
Syntax :
<IMG SRC="URL" ALT="SOME_TEXT">
Attribute:
SRC: SRC stands for source. Every image has a SRC attribute which tells the
browser where to find the image you want to display. The URL of the image
provided points to the location where the image is stored.
ALT: If the image cannot be displayed then the ALT attribute acts as an
alternative description for the image. The value of the ALT attribute is a user-
defined text.
Linking documents
LINKS
HTML, allows linking to other HTML documents as well as images. Clicking
on a section of text or an image in one web page will open an entire web page or
an image. The text or an image that provides linkages is called hypertext, and
hyperlink, or a Hotspot. The browser distinguishes Hyperlinks from normal
text. Every Hyperlink,
 Appears blue in color
 The hyperlink text/image is underlined
When the mouse cursor is placed over it, the standard arrow shaped mouse
cursor changes to the shape of a hand. The blue color, which appears by default,
can be over-ridden. To change these link colors, there are the attributes that can
be specified with the <BODY> tag.

Module 1- HTML
Links are created in a web page by using the <A>... </A> tags. Anything
written between the <A> </A> tags becomes a hyperlink/hotspot. By clicking
on the hyperlink navigation to a different web page or image takes place.
The document to be navigated needs to be specified. By using the HREF
attribute of the <A> tag the next navigable web page or image can be specified.
Syntax:
<A href="filename.html" >Hyperlink Text</a>
Hyperlinks can be of three types:
 Links to an external document
 Links to another webpage in outside website
 Links (jumps) to a specific place within the same document .Generally
one in case of a web page containing a large amount of text
The anchor tag contains following attributes:
Attribute Value Description
href URL Specifies the URL of a page or the name of the
anchor that the link goes to.
target _blank Where to open the target URL.
_parent _blank - the target URL will open in a new
_self window.
_top _self - the target URL will open in the same frame
as it was clicked.
_parent - the target URL will open in the parent
frameset.
_top - the target URL will open in the full body of
the window.
name section name Marks an area of the page that a link jumps to.
Example 3: <A> tag demo-Linking to another webpage

<HTML>
<HEAD>
<TITLE>MENU</TITLE>
</HEAD>
<BODY>

Module 1- HTML
<h2>This is a sample hyperlink page</h2>

<A HREF="ORG.HTML" TARGET="_blank"> ORANGE </A> <br>
<A HREF="BLUE.HTML" TARGET="_self">BLUE</A><br>
<A HREF="RED.HTML" TARGET="_blank">RED</A><br>
<A HREF="GRE.HTML" TARGET="_self">GREEN</A><br>
<A HREF="https://www.google.com/" TARGET="_self">Google</A>
</BODY>
</HTML>
Output
Example 4: <A> tag demo-Linking to a section in same webpage

<html>
<head>
</head>
<body>
<h2>Linking to different section in same web page</h2>
<p>This is the example of <i>Redirect

Module 1- HTML
to a particular section using HTML on same page</i>

</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<a href="#Top">Top</a>
<h2>Contact Us section </h2> <h2>Team Section</h2>
</body>
</html>
Output
LISTS
A list is a record of short pieces of information, such as people’s names, usually
written or printed with a single thing on each line and ordered in a way that
makes a particular thing easy to find.
For example:
 A shopping list
 To-do list

Module 1- HTML
Lists in HTML
HTML offers three ways for specifying lists of information. All lists must
contain one or more list elements.
The types of lists that can be used in HTML are :
1. UL: An unordered list. This will list items using plain bullets.
2. OL: An ordered list. This will use different schemes of numbers to list
items.
3. DL: A definition list. This arranges items in the same way as they are
arranged in a dictionary.
The Unordered HTML List
An unordered list starts with the <UL> tag. Each list item starts with the <LI>
tag. The list items are marked with bullets i.e small black circles by default.
Example 5: Unordered List
<html>
<HEAD>
<TITLE>LIST</TITLE>
</HEAD>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Output

Module 1- HTML
The TYPE Attribute can be used for <UL> tag to specify the type of bullet to be used. By
default, it is a disc. Following are the possible options −
<UL TYPE = "SQUARE">
<UL TYPE = "DISC">
<UL TYPE = "CIRCLE">
The Ordered HTML List
An unordered list starts with the <OL> tag. Each list item starts with the <LI>
tag. The list items are marked with numbers 1, 2…. by default.
The TYPE Attribute can be used for <OL> tag to specify the type of numbering to be used.
By default, it is a decimal numbers. Following are the possible options −
<OL TYPE = "A">
<OL TYPE = "a">
<OL TYPE = "I">
<OL TYPE = "i">
<OL TYPE = "1">
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Module 1- HTML
Example 6: Ordered List

<HTML>
<HEAD>
<TITLE>LIST</TITLE>
</HEAD>
<BODY>
<h2>Grocery list</h2>
<OL>
<LI>Bread</ LI >
< LI >Eggs</ LI >
< LI >Milk</ LI >
< LI >Coffee</ LI >
</OL>
</BODY>
</HTML>
Output
Definition Lists
The definition list or description list, is different: it has neither bullets nor
numbers. The description list tag is <DL> and the list elements consist of a term
and its definition. The term is marked by <DT> tags and the definition by
<DD> tags.

Module 1- HTML
An example use definition lists is given below.

<DL>
<DT>HTML </DT>
<DD> Hypertext Markup Language; the format of Web documents </DD>
</DL>
Example 7: Definition List

<html>
<HEAD>
<TITLE>LIST</TITLE>
</HEAD>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>These three elements are used to create a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Output

Module 1- HTML
Lists can be nested (lists inside lists). For example,

<OL type = "i">
<LI>Apples</LI>
<LI>Oranges</LI>
<LI>Bananas</LI>
<ul>
<li> small bananas </li>
<li> big bananas </li>
</ul>
</OL>
Example 8: Nested List

<html>
<head>
<title>list</title>
</head>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body> </html>

Module 1- HTML
Output
Creating Tables
A table is a grid organized into columns and rows, much like a spread sheet.
Tables were initially developed as a method to organize and display data in
columns and rows. Tables later became a tool for Web page layout, and as such
provide a possible solution for structured navigation.
Tables are useful for various tasks such as presenting text information and
numerical data. Tables can be used to compare two or more items in tabular
form layout. Tables are used to create databases.
Defining Tables in HTML
An HTML table is defined with the <TABLE> tag. Each table row is defined
with the <TR> tag. A table header is defined with the <TH> tag. By default,
table headings are bold and centered. A table data/cell is defined with the <TD>
tag.
Example 9: Tables
<html>
<HEAD>
<TITLE>LIST</TITLE>
</HEAD>
<body>
<table>

Module 1- HTML
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td> <td>Watson</td> <td>41</td>
</tr>
</table>
</body>
</html>
Output

Module 1- HTML
Attributes that can be included in the <TABLE> tag are:

Attribute Description
Horizontal alignment is controlled by the ALIGN attribute.
ALIGN
It can be set to left, right, center, justify or inherit.
Controls the vertical alignment of cell contents. It accepts
VALIGN
the values TOP, MIDDLE or BOTTOM
Sets the WIDTH to a specific number of pixels or to a
percentage of the available screen width. If width is not
WIDTH
specified, the data cell is adjusted based on the cell data
value.
Controls the border to be placed around the table. The
BORDER
border thickness is specified in pixels.
This attribute controls the distance between the data in a
CELLPADDING
cell and the boundaries of the cell.
CELLSPACING Controls the spacing between adjacent cells.
The COLSPAN attribute inside a <TH> or <TD> tag
instructs the browser to make the cell defined by the tag to
take up more than one column. The COLSPAN attribute
COLSPAN
can be set equal to the number of columns the cell is to
occupy. This attribute is useful when one row of the table
needs to be a certain number of columns wide.
The ROWSPAN attribute works in the same way as the
COLSPAN attribute except that it allows a cell to take up
ROWSPAN
more than one row. The attribute can be set by giving a
numeric value.
Example 10: Table with some attributes

<html>
<head>

Module 1- HTML
<title>HTML table Tag</title>

</head>
<body>
<table border = "1" bgcolor=cyan width=50%>
<tr>
<th>Team</th> <th>Ranking</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>South Africa</td> <td>2</td>
</tr>
<tr>
<td>Australia</td> <td>3</td>
</tr>
</table>
</body>
</html>
Output

Module 1- HTML
Frames
HTML Frames are used to divide the web browser window into multiple
sections where each section can be loaded separately. A FRAMESET tag is the
collection of frames in the browser window.
Creating Frames: Instead of using body tag, use <FRAMESET> tag in
HTML to use frames in web browser. The frameset tag is used to define how to
divide the browser. Each frame is indicated by <FRAME> tag and it basically
defines which HTML document shall open into the frame. The window is
divided into frames in a similar way the tables are organized: into rows and
columns. To define the horizontal frames use ROWS attribute of frame tag in
HTML document and to define the vertical frames use COLS attribute of frame
tag in HTML document.
There are few drawbacks with using frames .
 Some smaller devices cannot cope with frames often because their screen
is not big enough to be divided up.
 Sometimes webpage will be displayed differently on different computers
due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.
Syntax
<FRAMESET [COLS=”%,%”] [ROWS==”%,%”]>
<FRAME NAME=”NAME” SRC=”FILENAME” [FRAMEBORDER=”0”|”1”]
[SCROLLING=”YES”|AUTO|NO] >
</FRAMSET>
ROWS attribute will divide the webpage into horizontal frames and COLS
attribute divide page into vertical frames. The SRC attribute in <FRAME> point
to a valid HTML file or image which can be displayed within the frame.

Module 1- HTML
Scrollbar in frames can be adjusted using SCROLLING attribute. Frame border

can either set to 0 or 1
Example 11: Frames
Frame1.html
<html>
<head>
</head>
<body bgcolor= #7fffd4>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>
Frame2.html
<html>
<head>
</head>
<body bgcolor=#2f4f4f>
<h2>This is Second frame</h2>
</body>
</html>
Frame3.html
<html>
<head>
</head>
<body bgcolor= #c1ffc1>
<h2>This is Third frame</h2>
</body>
</html>

Module 1- HTML
Ex11.html
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
Output
Working with form elements

Forms are used to add an element of interactivity to a webpage. They are
usually used to let the reader send information to the server but can also
simplify navigation on complex webpages.

Module 1- HTML
The <form> tag in HTML is used to create form for user input. There are many
elements which are used within form tag. For example: <input>, <textarea>,
<button>, <select> and <option>
Syntax:
<FORM ACTION = "Script URL" METHOD = "GET|POST">
form elements like input, textarea etc.
</FORM>
Following is a list of the most frequently used form attributes
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are
GET and POST methods.
target Specify the target window or frame where the result of the script
will be displayed. It takes values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how the browser
encodes the data before it sends it to the server. Possible values are
−application/x-www-form-urlencoded − This is the standard
method most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload

binary data in the form of files like image, word file etc.
HTML Form Controls

There are different types of form controls that use to collect data using HTML
form .
1. Text Input Controls
2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls

Module 1- HTML
5. File Select boxes

6. Hidden Controls
7. Clickable Buttons
1. Text Input Controls
There are three types of text input used on forms −
 Single-line text input controls − This control is used for items that require
only one line of user input, such as search boxes or names. They are
created using HTML <input> tag.
Syntax is <INPUT TYPE =”text”>
Password input controls − This is also a single-line text input but it masks
the character as soon as a user enters it. They are also created using
HTMl <input> tag. Syntax is <INPUT TYPE =”password”>
Multi-line text input controls − This is used when the user is required to
give details that may be longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag. Syntax is
<TEXTAREA></ TEXTAREA >
Example 12:Textfield,password field and textarea in form
<html>
<head> <title>Text Inputs</title> </head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" /><br>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>

Module 1- HTML
</body>
</html>
Output
2. Checkboxes Controls
The HTML <input type=”checkbox”> is used to define a checkbox field. The
checkbox is shown as a square box that is ticked when it is activated. It allows
the user to select one or more option among all the limited choices. They are
also created using HTML <input> tag but type attribute is set to a checkbox.
Attributes are
type Indicates the type of input control and for checkbox input control
it will be set to a checkbox.
name Used to give a name to the control which is sent to the server to
be recognized and get the value.
value The value that will be used if the checkbox is selected
checked Set to checked if you want to select it by default
Example 13: Checkbox

<html>
<head>

Module 1- HTML
<title>HTML Checkbox Button</title>

</head>
<body>
<p>Which languages you work on:</p>
<form>
<input type="checkbox" name="language1" value="java">Java <br>
<input type="checkbox" name="language2" value="php">PHP <br>
<input type="checkbox" name="language3" value="cpp">C++
</form>
</body> </html>
Output
3. Radio Box Controls

Radio buttons are used when out of many options; just one option is required to
be selected. They are also created using HTML <input> tag and the type
attribute is set to radio. Attributes for radio button are-
Indicates the type of input control and for checkbox input control it
type
will be set to radio.
Used to give a name to the control which is sent to the server to be
name
recognized and get the value
value The value that will be used if the radio box is selected
checked Set to checked if you want to select it by default.

Module 1- HTML
Example 14: Radiobutton

<html>
<body>
<head>
<title>HTML Radio Button</title>
</head>
<p>Gender</p>
<form>
<input type="radio" name="gender" value="male">Male
<br>
<input type="radio" name="gender" value="female">Female
</form>
</body>
</html>
Output
4. Select Box Controls

Select boxes, also called drop down boxes, are used to allow users to select one
or more than one option from a pull-down list of options. Select boxes are
created using two elements which are “select” and “option”. List items are
defined within the select element.

Module 1- HTML
Attributes of <select> tag are

name Used to give a name to the control which is sent to the server to be
recognized and get the value.
size This can be used to present a scrolling list box.
If set to "multiple" then allows a user to select multiple items from

multiple
the menu.
The list of important attributes of <option> tag are

value The value that will be used if an option in the select box box is
selected.
selected Specifies that this option should be the initially selected value
when the page loads.
label An alternative way of labeling options
Example 15: Select Box

<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>

Module 1- HTML
</form>
</body>
</html>
Output
5. File Select boxes

If you want to allow a user to upload a file to your web site, you will need to use
a file upload box, also known as a file select box. This is also created using the
<input> element but type attribute is set to file. Following is the list of
important attributes of file upload box −
name Used to give a name to the control which is sent to the server to
be recognized and get the value.
accept Specifies the types of files that the server accepts.
Example 16: file uploading

<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>

Module 1- HTML
</html>
Output
6. Hidden Controls
Hidden form controls are used to hide data inside the page which later on can be
pushed to the server. This control hides inside the code and does not appear on
the actual page.
For example, following hidden form is being used to keep current page number.
When a user will click next page then the value of hidden control will be sent to
the web server and there it will decide which page will be displayed next based
on the passed current page.
Example 17:hidden field
<html>
<head>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>

Module 1- HTML
</body>
</html>
Output
7. Clickable Buttons
There are various ways in HTML to create clickable buttons. A clickable button
can be created using <input>tag by setting its type attribute to button. The type
attribute can take the following values
Type Description
Submit This creates a button that automatically submits a form.
Reset This creates a button that automatically resets form controls to

their initial values.
Button This creates a button that is used to trigger a client-side script
when the user clicks that button.
Image This creates a clickable button but we can use an image as
background of the button.
Example 18: Button controls

<html>
<head>
</head>
<body>
<form>

Module 1- HTML
<input type = "submit" name = "submit" value = "Submit" />

<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "g.png" />
</form>
</body>
</html>
Output
Example 19: Sample Form

<HTML>
<HEAD>
<TITLE>SAMPLE FORM</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>FORMS DEMO</H2>

Module 1- HTML
This is a <sample> registration form<br><br>

<FORM ACTION="A.PHP" METHOD=get>
ENTER YOUR NAME
<INPUT TYPE=TEXT NAME="FNAME" SIZE=10 >
<BR><BR>
ENTER YOUR PASSWORD
<INPUT TYPE=PASSWORD NAME="PWD"><BR><BR>
ENTER YOUR ADDRESS
<TEXTAREA NAME="ADD" rows=5 cols=50></TEXTAREA>
<BR><BR>
SELECT YOUR HOBBIES:
<INPUT TYPE="CHECKBOX" NAME=CH1 value="Reading"
checked> READING
<INPUT TYPE="CHECKBOX" NAME=CH2 value="pubg"> PUBG
<INPUT TYPE="CHECKBOX" NAME=CH3 value="drawing"> DRAWING
<BR><BR>
SELECT GENDER ::
<INPUT TYPE="RADIO" NAME=RD1 checked>MALE
<INPUT TYPE="RADIO" NAME=RD1>FEMALE
<BR><BR>
SELECT YOUR PLACE :<SELECT NAME="PLC">
<OPTION value="TVM">TRIVANDRUM</OPTION>
<OPTION value="QLN">KOLLAM</OPTION>
<OPTION selected>KOTTAYAM</OPTION>
<OPTION>ALAPPUZHA</OPTION>
</SELECT><BR><BR>
<INPUT TYPE="HIDDEN">
UPLOAD YOUR PHOTO<INPUT TYPE="FILE"><BR><BR>
<INPUT TYPE=SUBMIT NAME="S" VALUE="SAVE DATA">

Module 1- HTML
<INPUT TYPE=RESET NAME="R" VALUE="CLEAR FORM">

</FORM>
</BODY>
</HTML>
Output

Phpmodule 1

Uploaded by

Copyright:

Available Formats

Phpmodule 1

Uploaded by

Document Information

Original Description:

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

Phpmodule 1

Uploaded by

Copyright:

Available Formats

Module 1- HTML

Figure 1: Client Server Architecture

Web Programming Using PHP 1

Web Programming Using PHP 2

Web Programming Using PHP 3

bgcolor Background color

So general structure of an HTML page is

Text formatting tags

Web Programming Using PHP 4

HTML supports six different levels of headings. The highest-level header

Example 1: <P>,<BR> ,<H1> and <HR> tag demo

Web Programming Using PHP 5

<p>This is a sample paragraphbefore the line break<br />

Web Programming Using PHP 6

Making a text Subscript or Superscript: The <SUP> element is used to

Web Programming Using PHP 7

Example 2: <B>, <SUB> and <MARQUEE> tag demo

Web Programming Using PHP 8

Inserting images in a web page

Web Programming Using PHP 9

Example 3: <A> tag demo-Linking to another webpage

Web Programming Using PHP 10

<h2>This is a sample hyperlink page</h2>

Example 4: <A> tag demo-Linking to a section in same webpage

Web Programming Using PHP 11

to a particular section using HTML on same page</i>

Web Programming Using PHP 12

Web Programming Using PHP 13

Web Programming Using PHP 14

Example 6: Ordered List

Web Programming Using PHP 15

An example use definition lists is given below.

Example 7: Definition List

Web Programming Using PHP 16

Lists can be nested (lists inside lists). For example,

Example 8: Nested List

Web Programming Using PHP 17

Web Programming Using PHP 18

Web Programming Using PHP 19

Attributes that can be included in the <TABLE> tag are:

Example 10: Table with some attributes

Web Programming Using PHP 20

<title>HTML table Tag</title>

Web Programming Using PHP 21

Web Programming Using PHP 22

Scrollbar in frames can be adjusted using SCROLLING attribute. Frame border

Web Programming Using PHP 23

Working with form elements

Web Programming Using PHP 24

mutlipart/form-data − This is used when you want to upload

HTML Form Controls

Web Programming Using PHP 25

5. File Select boxes

Web Programming Using PHP 26

Example 13: Checkbox

Web Programming Using PHP 27

<title>HTML Checkbox Button</title>

3. Radio Box Controls

This is a <sample> registration form<br><br>