0% found this document useful (0 votes)

106 views

Web Tech - 1-26-115

web technology book

Uploaded by

Shalom Salve

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

106 views

Web Tech - 1-26-115

web technology book

Uploaded by

Shalom Salve

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 90

CHAPTER

Introduction to HTML,
HTTP and PHP
Objectives…
To understand Basic Concepts in HTML
To learn Basics of HTTP
To study Basic Concepts of PHP
To learn Language Basics and Lexical Structure of PHP

1.0 INTRODUCTION
• Web technologies refer to techniques and tools that are used to produce fully-featured
Websites and Web applications.
• A Website is a collection of web pages. A document on the Web is called a Web page
and is identified by a unique address called the Uniform Resource Locator (URL).
• A Web application (Web app) is an application program that is stored on a Web server
and delivered over the Internet through a Browser.
• The two types of Web pages are static web page and dynamic web page. The content
(data and information) in static web pages does not get changed until someone
changed it manually while the content in dynamic web pages changes dynamically
(runtime).
• The two distinct parts of a website are the frontend (refers to all those parts of a
website that a user can see on their screen and interact with) and the backend
(involves the hidden mechanisms where functions, methods, and data manipulation
happens).
• The World Wide Web (WWW) consists of files, called pages or web pages, which
contain information and links to resources throughout the Internet.
• In simple word, all publicly accessible websites collectively constitute the World Wide
Web.
• A web page is an electronic document written in a computer language called HTML
(HyperText Markup Language). HTML is the standard markup language for creating
Web pages and Web applications.
• Web design is the process of creating websites. Website is a collection of related web
pages that may contain text, images, audio and video.
1.1
Web Technologies - I Introduction to HTML, HTTP and PHP

• A web browser or a browser (client) is application software for accessing the World
Wide Web. Some popular web browsers are Opera, Mozilla Firefox, Google Chrome,
and Safari.
• When a user requests a web page from a particular website, the web browser
retrieves the necessary content from a Web server (server) and then displays the page
on the user's device like desktops, laptops, tablets, and smart phones.
• Web development, or web programming, refers to the design of software applications
for a Web site. Web publishing or Online publishing, is the process of publishing
content on the Internet.
• Web technology is a collective name for technologies primarily for the World Wide
Web (WWW) or Web. These technologies includes Markup Language (HTML),
Programming languages (JavaScript, Python, PHP etc.), Frameworks (Node.js,
Angular.js, .NET, Drupal etc.), Databases (MongoDB, PostgreSQL, MySQL etc.) CSS
(Cascading Style Sheet), Libraries (JQuery), Data formats (XML (Extensible Markup
Language), JSON (JavaScript Object Notation)) and so on.
• In this chapter we will study HTML, CSS, HTTP and PHP technologies related to web
technologies.

1.1 OVERVIEW OF HTML

• HTML stands for HyperText Markup Language. HTML is the standard markup
language used for creating Web pages.
• HTML was created by Tim Berners-Lee in late 1991. HTML is used to create Web pages
which are rendered over the Web.
• HTML5 is the latest version of HTML language. HTML5 is a markup language used for
structuring and presenting content on the World Wide Web.
Features of HTML:
1. HTML is a very easy and simple language and can be easily understood and
modified.
2. It is a markup language so it provides a flexible way to design web pages along
with the text.
3. It is platform-independent because it can be displayed on any platform like
Windows, Linux and Macintosh etc.
4. It facilitates the programmer to add Graphics, Videos, and Sound to the web pages
which makes it more attractive and interactive.
5. Canvas feature allows a web developer to render graphics on the fly. As with
video, there is no need for a plug in.
6. It is very easy to make effective presentation with HTML because it has a lot of
formatting tags.
7. It supports scripting languages to support dynamic web applications (e.g., forms
that react to user input).
1.2
Web Technologies - I Introduction to HTML, HTTP and PHP

• An HTML file is a text file with extension .htm or .html. To create the HTML source
document, we need an HTML Editor. An HTML editor is a program for editing HTML,
the markup of a web page.
• An HTML editor is a computer program used for creating and editing Web pages.
There are two main varieties of HTML editors i.e. text and WYSIWYG (What You See Is
What You Get) editors.
• A text editor is a type of program used for editing plain text files. A text-based HTML
editor includes Notepad on Windows, GNU Emacs on UNIX/Linux, or SimpleText on
the Macintosh.
• The WYSIWYG editors provide an editing interface which resembles how the page will
be displayed in a web browser like Adobe Dreamweaver, KomodoIDE, EditPlus etc.
• Other professional text editors for HTML include Notepad++, Sublime Text, Vim, Atom,
and Visual Studio Code and so on.
HTML Page Structure:
• Fig. 1.1 shows page structure of HTML. A web page is also known as HTML page or
HTML document.
• A basic HTML page starts with the Document Type Declaration also called DOCTYPE
declaration before the <html> tag. The <!DOCTYPE> declaration represents the
document type.
• The Document Type Declaration is not an HTML tag; it is an instruction to the web
browser about what version of HTML the page is written in.
• The current version of HTML is HTML5 and it makes use of the only one declaration
<!DOCTYPE html>.

<!DOCTYPE>

</head>
<body>

</body>
</html>

Fig. 1.1: HTML Web Page Structure

1.3
Web Technologies - I Introduction to HTML, HTTP and PHP

• The entire HTML document is contained within an opening <html> tag and a closing
</html> tag.
• Within the <html> tag, the document is divided into a head and a body. The <head> tag
contains descriptive information about the document itself, such as its title, the style
sheet(s) it uses and so on.
• The <body> tag contains the entire information or content about the web page and its
behavior. It also contains the information that we want to display on a Web page.
Example for creating an html document:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<body>
<h1>Nirali Prakashan</h1>
<p>Textbook Publication Firm.</p>
</body>
</head>
</html>
Output:

1.1.1 HTML Basic Tags

• HTML documents are simply a text file made up of HTML elements and these elements
are defined using HTML tags.
• An element is the basic building block of HTML and is typically made up of two tags
namely, an opening or start tag, some contents and a closing or end tag as shown in
Fig. 1.2.
start tag end tag

<tag name> contents </tag name>

element
Fig. 1.2: Element in HTML
• Fig. 1.3 shows an example of HTML element. In this example, the HTML element is a
paragraph <p> opening and closing tags with “My paragraph...” content that will
display on the web page.
1.4
Web Technologies - I Introduction to HTML, HTTP and PHP

HTML element

<p>My paragraph ... </p>

Opening Element Closing

tag content tag
Fig. 1.3: Example of an Element in HTML
• Tags contain elements which provide instructions for how information will be
processed or displayed on a web page.
• HTML tags are labels we use to mark up the beginning and end of an element. All tags
have the same format and they begin with a less-than sign "<" and end with a greater-
than sign ">" also known as angle brackets.
• Generally speaking, there are two kinds of tags i.e., an opening tag like <html> and a
closing tag like </html>.
• A closing tag must include forward slash "/" and it controls the appearance, layout and
flow of the web page. The information within an element's opening and closing tags is
its content.
Syntax of Tag: <tag_name> Content… </tag_name>
• A tag contains three parts i.e. element (identification of tag), attribute and value as
shown in Fig. 1.4.
• The additional information supplied to an HTML tag is known as attributes of a tag.
Attributes are written immediately following the tag, separated by a space like
<font face="arial"> Welcome </font>.
• Multiple attributes can be associated with a tag, also separated by a space like
<font face = "arial" size = 12> Welcome </font>. The face and size are multiple
attributes of the <font> tag.
• In Fig. 1.4 the anchor <a> tag defines a hyperlink in which the href attribute specifies
the URL (attribute value) of the page the link goes to.
Element
Attribute
Attribute Attribute
name value

< a href ="hope.html">Computer Hope</a>

Opening tag Enclosed tag Closing

content tag
Fig. 1.4: Example of an Element, Tag, Attribute in HTML
• HTML tags can be of following two types:
1. Paired Tags: In paired tag, first tag is called the opening tag like <b> and the
second tag is called the closing tag like </b>. Paired tag is also called as container
tag. In other words, a tag is said to a paired tag if it along with a companion tag or
closing tag appears at the end.
1.5
Web Technologies - I Introduction to HTML, HTTP and PHP

2. Singular Tags: The singular tag is also known as a stand-alone tag or empty tag.
The stand-alone tag does not have companion tag or closing tag. For example <br>
tag will insert a line break. This tag does not require any companion tag or a
closing tag.
Basic HTML Tags:
• HTML contains following basic tags:
1. <html> Tag: The <html> tag represents the root of an HTML document. The <html>
tag is the container that contains all other HTML elements (except for the
<!DOCTYPE> declaration which is located before the opening HTML tag). The
<html> tag tells the browser that this is an HTML document.
Syntax: <html>…………</html>

Attribute Description
1. Manifest This attribute specifies the address of the document's
application cache manifest and the value must be a valid URL.

2. <title> Tag: The <title> tag is used for declaring the title, or name, of the HTML
document. The title is usually displayed in the browser's title bar (at the top) or the
<title> tag defines a title in the browser toolbar. It is also displayed in browser
bookmarks and search results.
Syntax: <title>…………</title>
3. <head> Tag: The <head> tag is a container for all the head elements and must
include a title for the document, and can include scripts, styles, meta information,
and so on.
Syntax: <head>…………</head>
4. <body> Tag: The <body> tag defines the document's body. The body tag is placed
between the </head> and the </html> tags. The <body> tags contains all the
contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Syntax: <body>………</body>
Attributes of <body> Tag:
Attribute Value Description
1. alink color This attribute specifies the color of an active link
in a document.
2. background URL This attribute specifies a background image for a
document.
3. bgcolor color This attribute specifies the background color of a
document.
contd. …
1.6
Web Technologies - I Introduction to HTML, HTTP and PHP

4. link color This attribute specifies the color of unvisited links

in a document.
5. text color This attribute specifies the color of the text in a
document.
6. vlink color This attribute specifies the color of visited links in
a document.

HTML Text Formatting Tags:

• The HTML tags are used for formatting text are called as text formatting tags.
Following are the text formatting tags used in HTML:
Tag Description
1. <b> The <b> tag defines bold text. Anything that appears in a <b>...</b>
element is displayed in bold.
Syntax: <b>……</b>
2. <em> The <em> tag is used for indicating emphasis. The <em> tag surrounds
the word/term being emphasised.
Syntax: <em>……</em>
3. <i> The content of the <i> tag is usually displayed in italic. The <i> tag can
be used to indicate a technical term, a phrase from another language, a
thought etc.
Syntax: <i>……</i>
4. <small> The <small> tag defines smaller text (and other side comments). The
content of the <small> element is displayed one font size smaller than
the rest of the text surrounding it.
Syntax: <small>……</small>
contd. …

1.7
Web Technologies - I Introduction to HTML, HTTP and PHP

5. <strong> The <strong> tag is used for indicating strong importance for its
contents. The strong tag surrounds the emphasized word/phrase.
Syntax: <strong>……</strong>
6. <sub> The <sub> tag defines subscript text. Subscript text appears half a
character below the baseline. Subscript text can be used for chemical
formulas, like H2O.
Syntax: <sub>……</sub>
7. <sup> The <sup> tag defines superscript text. Superscript text appears half a
5
character above the baseline like 10 .
Syntax: <sup>……</sup>
8. <ins> The <ins> tag defines a text that has been inserted into a document.
Syntax: <ins>……</ins>
9. <del> The <del> tag defines text that has been deleted from a document.
Syntax: <del>……</del>
10. <u> The <u> tag usually results in the text being underlined. Anything that
appears in a <u>...</u> element is displayed with underline,
Syntax: <u>……</u>
11. <strike> Anything that appears in a <strike> tag is displayed with strikethrough,
which is a thin line through the text like, strikethrough.
Syntax: <strike>……</strike>
12. <big> The content of the <big> element is displayed one font size larger than
the rest of the text surrounding it.
Syntax: <big>……</big>
Example for text formatting tags:
<!DOCTYPE html>
<html>
<head>
<title> Example of HTML Text Formatting Tags </title>
</head>
<body>
<p>Nirali Prakashan</p>
<font size="4">Wecome to <b>Nirali Prakashan.</b> <br/></font>
<font size="2"><i>Nirali Prakashan</i> is a textbook publication
firm.<br/></font>
<font face="verdana" color="black">Nirali Prakashan <u>publised
more than 3500 book titles.</u></font>
</body>
</html>
Output:

1.8
Web Technologies - I Introduction to HTML, HTTP and PHP

HTML Block Level Tags:

• Most HTML tags are defined as block level elements. Block level tags normally start
(and end) with a new line when displayed in a browser.
1.  Comment Tag: The comment tag is used to insert comments in the source
code in a HTML document. Comments are not displayed in the browsers.
Comments can be inserted into the HTML code to make it more readable and
understandable.
2. Heading <h1> to <h6> Tags: The HTML <h1> to <h6> tags are used to define HTML
headings. <h1> defines the most important heading, while <h6> defines the least
important heading.
Syntax:
<h1>…………</h1>
<h2>…………</h2>
<h3>…………</h3>
<h4>…………</h4>
<h5>…………</h5>
<h6>…………</h6>
Attributes for Header Tags:

Attribute Value Description

1. align left This attribute specifies the alignment of a heading.

center
right
justify

3. <p> Tag: HTML documents are divided into paragraphs. The HTML <p> tag is used
for defining a paragraph.
Syntax: <p>…………</p>
Attributes for Paragraph Tag:

Attribute Value Description

1. align left Align attribute specifies the alignment of the text

right within a paragraph.
center
justify

4. <br> Tag: The HTML <br> tag is used for specifying a line break. The <br> tag is an
empty tag. In other words, it has no end tag. Syntax: <br/>
5. <center> Tag: The <center> tag is used to center-align text.
1.9
Web Technologies - I Introduction to HTML, HTTP and PHP

6. Non breaking Spaces: Suppose we were to use the phrase "14 Angry Men." Here
we would not want a browser to split the "14" and "Angry" across two lines. A good
example of this technique appears in the movie "14 Angry Men." In cases where
we do not want the client browser to break text, we should use a non-breaking
space entity ( ) instead of a normal space. For example, when coding the "14
Angry Men" paragraph, we would use something similar to the following code:
<p>A good example of this technique appears in the movie
"14 Angry Men."</p>
7. <div> Tag: The <div> tag defines a division or a section in an HTML document. The
<div> tag is used to group block-elements to format them with CSS.
Syntax: <div>…………</div>
Attribute Value Description
1. align left Align attribute specifies the alignment of the content inside
right a <div> element
center
justify
Example for <div> tag:
<!DOCTYPE html>
<html>
<head>
<title> Example of HTML div Tag </title>
</head>
<body>
<div style="background-color:orange;text-align:center">
<p>Nirali Prakashan</p>
</div>
<div style="background-color:pink;text-align:center">
<p>Pragati Group</p>
</div>
</body>
</html>
Output:

8. <span> Tag: The <span> tag is used for grouping and applying styles to inline
elements.
Syntax: <span>…………</span>
1.10
Web Technologies - I Introduction to HTML, HTTP and PHP

9. <hr> Tag: The HTML <hr> tag is used for specifying a horizontal rule in an HTML
document. The <hr> tag is used for creating a horizontal line which separate
content (or define a change) in an HTML page.
Syntax: <hr/>
Attributes for <hr> Tag:
Attribute Value Description
1. align left This attribute specifies the alignment of a <hr>
center element.
right
2. noshade noshade This attribute specifies that a <hr> element should
render in one solid color (no-shaded), instead of a
shaded color.
3. size pixels This attribute specifies the height of a <hr> element.
4. width pixels % This attribute specifies the width of a <hr> element.

Example for <hr> tag:

<!DOCTYPE html>
<html>
<head>
<title> Example for HTML <hr> Tag</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>

1.11
Web Technologies - I Introduction to HTML, HTTP and PHP

<hr align="right" width="50%">

<p>This is paragraph two and should be at middle</p>
<hr size="7">
<p>This is paragraph two and should be at bottom</p>
<hr width="80%" size="12" noshade>
</body>
</html>
Output:

10. <font> Tag: Fonts play very important role in making a website more user friendly
and increasing content readability. The <font> tag specifies the font face, font size,
and font color of text.
Syntax: <font>…………</font>
Attributes for <font> tag:
Attribute Value Description
1. color rgb(x,x,x) This attribute specifies the color of text.
#xxxxxx
colorname
2. face font_family This attribute specifies the font of text.
3. size number This attribute specifies the size of text.
Example for <font> tag:
<!DOCTYPE html>
<html>
<head>
<title> Example for HTML font Tag </title>
</head>
<body>
<p><h2>Nirali Prakashan</h2></p>
<font size="4" color="red">Wecome to Nirali Prakashan. <br/></font>
<font size="2" color="blue">Nirali Prakashan is a textbook
publication firm.<br/></font>
<font face="verdana" color="black">Nirali Prakashan publised more
than 3500 book titles.</font>
</body>
</html>
1.12
Web Technologies - I Introduction to HTML, HTTP and PHP

Output:

HTML "Computer Output" or "Code Formatting" Tags:

• HTML normally uses variable letter size and spacing. This is not we want when
displaying computer code for this purpose Computer Code Elements (tags) are used
like <kbd>, <samp>, <code> etc. and all these tags are displayed in fixed letter size and
spacing.
• HTML Citations, Quotations and Definition Tags includes <abbr>, <address>, <bdo>,
<blockquote>, <q>, <cite> etc.
Hyperlinks in HTML:
• The real power of HTML is its ability to link one document to the other document.
A link is a connection from one web resource (documents) to another.
• A webpage can contain various links that take us directly to other pages and even
specific parts of a given page. These links are known as hyperlinks.
• A hypertext link, or hyperlink or link, contains a reference to a specific Web page that
we can click to open that Web page.
• Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases,
and images.
HTML <a> Anchor Tag:
• The HTML <a> tag is used for creating a hyperlink to another web page. The <a> tag
can be used in two ways:
1. To create a link to another document, by using the href attribute, and
2. To create a bookmark inside a document, by using the name attribute.
• The <a> tag defines a hyperlink, which is used to link from one page to another. By
default, links will appear as follows in all browsers:
1. An unvisited link is underlined and blue,
2. A visited link is underlined and purple, and
3. An active link is underlined and red.
Syntax: <a href="Document URL">…………</a>
Attributes Value Description
1. charset char_encoding This attribute specifies the character-set of a
linked document.
2. coords coordinates This attribute specifies the coordinates of a link.
3. href URL This attribute specifies the URL of the page the link
goes to.
contd. …

1.13
Web Technologies - I Introduction to HTML, HTTP and PHP

4. hreflang language_code This attribute specifies the language of the linked

document.
5. media media_query This attribute specifies what media/device the
linked document is optimized for.
6. name section_name This attribute specifies the name of an anchor.
7. rel alternate This attribute specifies the relationship between
author the current document and the linked document.
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
8. rev text This attribute specifies the relationship between
the linked document and the current document.
9. shape default This attribute specifies the shape of a link.
rect
circle
poly
10. target _blank This attribute specifies where to open the linked
_parent document.
_self
_top
framename
11. type MIME_type This attribute specifies the MIME type of the
linked document.

Example for <a> tag:

<!DOCTYPE html>
<html>
<head>
<title> Example for Hyperlink in HTML </title>
</head>
<body>
<p> <a href="default.asp">HTML</a> This is a link to a page on this
website.</p>
1.14
Web Technologies - I Introduction to HTML, HTTP and PHP

<p> <a href="http://www.google.com/">Google</a> This is a link to a

website on the World Wide Web.</p>
</body>
</html>
Output:

Concept of URL:
• Each and every web page has a unique address, called a Uniform Resource Locator
(URL) that identifies its location on the Internet.
Parts of URL:
• URL has several parts i.e., the protocol, the domain name, the directory or folder, and
the filename and its extension. Below is an example of URL and the corresponding
parts.
https://www.niraliprakashan.com/html/index.htm

Protocol Domain name Directory File name and Extension

• The first part of URL is called protocol in the URL above the protocol being used is the
https protocol which enables the web browsing. HTTP protocol allows the computers
in the World Wide Web to talk to each other. It provides a set of instructions for
precise information exchange.
• The domain name is the second part of URL. It is a text name that corresponds to the
IP address of the server that serves the web site.
• Text name is easier to remember that is why domain name is used instead of the IP
address. In our example the domain name is www.niraliprakashan.com.
• There are domain names that ends with .com (for commercial), .edu (for education),
.org (for organization), .info (for information) and many more.
• Another part of the URL identifies the directory name or the folder name. It is the
actual location of the file you want to access.
• When creating links make sure that the directory exists and contains the file we want
to link to. In the given example the name of the directory or folder is html.
• A directory may consist of one or more sub directories. The last part of the URL is the
file name is index.html. In creating links, make sure that the file exists and make sure
to use the appropriate file extension such as .htm or .html.
• We may address a URL in one of the following two ways:
1. Absolute: An absolute URL is the complete address of a resource. For example,
https://www.niraliprakashan.com/html/html_text_links.htm
1.15
Web Technologies - I Introduction to HTML, HTTP and PHP

2. Relative: A relative URL indicates where the resource is in relation to the current
page. Given URL is added with the <base> element to form a complete URL. For
example, /html/html_text_links.htm. There are two types of relative URLs:
(i) In Document Relative URLs, the document address is given in relation with
the originating document.
(ii) In Server Relative URLs, the document address is given in relation with the
server on which the document is present.
Lists in HTML:
• In HTML, we can list out the items, subjects or menu in the form of a list. HTML gives
us three different types of lists as explained below:
1. Unordered Lists: An unordered list is a collection of related items that have no
special order or sequence. Unordered list is created by using <ul> tag. Each item in
the list is marked with a bullet. The bullet itself comes in three flavors: squares,
discs, and circles.
2. Ordered Lists: The Ordered list is created by using <ol> tag. Each item in the list is
marked with a number. The numbering starts at one and is incremented by one
for each successive ordered list element tagged with <li> tag.
3. Definition Lists: The definition list is the ideal way to present a glossary, list of
terms, or other name/value list. Definition List makes use of <dl>, <dt> and
<dd>tags.
• Metadata is data (information) about data. Meta elements are typically used to specify
page description, keywords, author of the document, last modified and other
metadata.
• The <meta> tag is used for declaring metadata for the HTML document. The <meta>
tag always goes inside the head element.
Syntax: <meta name = string content = string>
1. <li> List Tag: The <li> tag defines a list item. The <li> tag is used in ordered lists
(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
Syntax: <li>………</li>
Attributes Value Description
1. type 1 This attribute specifies which kind of bullet point
A will be used.
a
I
i
disc
square
circle
2. value number This attribute specifies the value of a list item.

1.16
Web Technologies - I Introduction to HTML, HTTP and PHP

2. <ul> Unordered List Tag: An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag. The <ul> tag defines an unordered (bulleted) list.
Syntax: <ul>………</ul>
Attributes Value Description
1. compact compact This attribute specifies that the list should render
smaller than normal.
2. type disc This attribute specifies the kind of marker to use in
square the list.
circle
Example for <ul> tag:
<!DOCTYPE html>
<html>
<head>
<h3>An Unordered List Example</h3>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</head>
</html>
1.17
Web Technologies - I Introduction to HTML, HTTP and PHP

Output:

• Nested List: One list inside another list is known as nesting of list or nested list. We
can nested unordered list as follows:
<!DOCTYPE html>
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

1.18
Web Technologies - I Introduction to HTML, HTTP and PHP

Output:

3. <ol> Ordered List Tag: An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag. Each item in the list is marked with a number.
Syntax: <ol>…………</ol>
Attributes Value Description
1. compact compact This attribute specifies that the list should render
smaller than normal.
2. reversed reversed This attribute specifies that the list order should be
descending like 9,8,7...
3. start number This attribute specifies the start value of an
ordered list.
4. type 1 This attribute specifies the kind of marker to use in
A the list.
a
I
i

1.19
Web Technologies - I Introduction to HTML, HTTP and PHP

<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</head>
</html>
Output:

1.20
Web Technologies - I Introduction to HTML, HTTP and PHP

4. Definition Lists: A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list. The <dl> tag is used to provide a list of items
with associated definitions.
Syntax: <dl>…………</dl>
Definition list makes use of following two tags:
(i) <dt>: The <dt> tag is used inside dl. It marks up a term whose definition is
provided by the next dd. The dt tag may only contain text-level markup.
(ii) <dd>: The <dd> tag is used inside a dl definition list to provide the definition of
the text in the dt tag. It may contain block elements but also plain text and
markup.
Example for definition list:
<!DOCTYPE html>
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Output:

Images in HTML:
• It is true that one single image is worth than thousands of words. So as a web
developer we should have clear understanding on how to use images in the web
pages.
• Images are used in many ways to enhance the look of a Web page and make it more
interesting and colorful.
• There are basically following two types of graphic programs for images:
1. Bitmap (or Raster) images are stored as a series of tiny dots called pixels. Each
pixel is actually a very small square that is assigned a color, and then arranged in a
pattern to form the image. Bitmap graphics can be edited by erasing or changing
the color of individual pixels using a program such as Adobe Photoshop.

1.21
Web Technologies - I Introduction to HTML, HTTP and PHP

2. Vector images are not based on pixel patterns, but instead use mathematical
formulas to draw lines and curves that can be combined to create an image from
geometric objects such as circles and polygons. Vector images are edited by
manipulating the lines and curves that make up the image using a program such
as Adobe Illustrator.

(a) Vector Image (b) Bitmap Image

Fig. 1.5
Types of Images:
• Some common types of images used in HTML are listed below:
1. JPEG (Joint Photographic Experts Group) is the most popular among the image
formats used on the Web. JPEG files usually have a filename extension of .jpg or
.jpeg.
2. GIF (Graphic Interchange Format) images are limited to 256 colors; they are
cross-platform, which means any computer can view them. GIF files have the .gif
extension.
3. BMP (Bitmap) is the standard Windows image format on DOS and Windows
compatible computers. The BMP format supports RGB (Red, Green, Blue) indexed-
colors, grayscale, and Bitmap color modes. BMP files have the .bmp extension.
4. PDF (Portable Document Format) is used by Adobe Acrobat. PDF files can
represent both vector and bitmap graphics. The Photoshop PDF format supports
RGB, indexed-colors, CMYK (Cyan, Magenta, Yellow and Black), grayscale and
Bitmap. PDF file has .pdf extension.
5. TIFF (Tagged-Image File Format) is used to exchange files between applications
and computer platforms. Virtually all paint programs, image editing, and page
layout applications support TIFF file format. TIFF files have the .tif or .tiff
extension.
6. PNG (Portable Network Graphics) pronounced "ping" was developed as an
alternative to GIF. PNG files support 24-bit images and produces background
transparency without jagged edges. PNG files have the .png extension.
HTML <img> Image Tag:
• In HTML, images are defined with the <img> tag. The <img> tag is empty, which
means that it contains attributes only, and has no closing tag.

1.22
Web Technologies - I Introduction to HTML, HTTP and PHP

• We will insert any image in our web page by using <img> tag.
Syntax:
<img src="image URL" attr_name="attr_value"... more attributes />
Attributes Value Description
1. alt text This attribute specifies an alternate text for an
image.
2. src URL This attribute specifies the URL of an image.
3. align top This attribute specifies the alignment of an
bottom image according to surrounding elements.
middle
left
right
4. border pixels This attribute specifies the width of the
border around an image.
5. crossoriginNew anonymous This attribute allow images from third-party
use- sites that allow cross-origin access to be used
credentials with canvas.
6. height pixels This attribute specifies the height of an image.
7. hspace pixels This attribute specifies the whitespace on left
and right side of an image.
8. ismap ismap This attribute specifies an image as a server-
side image-map.
9. longdesc URL This attribute specifies the URL to a document
that contains a long description of an image.
10. src URL This attribute specifies the URL of an image.
11. usemap #mapname This attribute specifies an image as a client-
side image-map.
12. vspace pixels This attribute specifies the whitespace on top
and bottom of an image.
13. width pixels This attribute specifies the width of an image.
Example for image:
<!DOCTYPE html>
<html>
<head>
<meta name="GENERATOR" content="MICROSOFT FRONTPAGE 4.0">
<meta name="PROGID" content="FRONTPAGE.EDITOR.DOCUMENT">
<title>IMAGE SPACING</title>
</head>
<body>
<p>
1.23
Web Technologies - I Introduction to HTML, HTTP and PHP

<img src = "http://www.umnet.com/pic/diy/screensaver/8/mickey-mouse-87422.jpg"

border=1 width="90" height="80">
<img src = "http://www.umnet.com/pic/diy/screensaver/8/mickey-mouse-87422.jpg"
border=1 width="90" height="80"> NO VERTICLE OR HORIZONTAL SPACING</p>
<p>
<img src = "http://www.umnet.com/pic/diy/screensaver/8/mickey-mouse-87422.jpg"
width = "90" height = "80" border=1 HSPACE = "20" VSPACE = "20">
<img src = "http://www.umnet.com/pic/diy/screensaver/8/mickey-mouse-87422.jpg"
width = "90" height = "80" border=1 HSPACE ="20" VSPACE = "20" > 20 PIXELS
VERTICLE AND HORIZONTAL SPACING FROM EACH SIDE</p>
</body>
</html>
Output:

Image as a Link:
• Anything can be a link i.e., text or images. To make an image into a link we simply put
the image tag inside the tag for a link. The tag would look like this:
<a href="http://www.anycartoonsite.com"><img src="z:\book\mikey.jpg"></a>

Example for image as link:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" CONTENT="TEXT/HTML;
CHAR SET = WINDOWS-1252">
<meta name="GENERATOR" CONTENT="MICROSOFT FRONTPAGE 4.0">
<meta name="PROGID" CONTENT="FRONTPAGE.EDITOR.DOCUMENT">
<title>IMAGELINK</title>
</head>

1.24
Web Technologies - I Introduction to HTML, HTTP and PHP

<body>
IMAGE LINK EXAMPLE
<p>
<a href = "HTTP://WWW.YAHOO.COM" ><img src = "http://images4.wikia.
nocookie.net/__cb20120710211159/cartoons/images/8/80/Mickey_Mouse.jpg"
border = "0" width ="90" height = "80"> </a>
</p>
</body>
</html>
Output:

Frames in HTML:
• With frames, we can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of the
others. A collection of frames in the browser window is known as a frameset.
• The frameset, frame, and noframes tags are supported in previous versions of HTML
such as HTML 4.01 and not supported in HTML5.

Example for Vertical frames:

<!DOCTYPE html>
<html>
<frameset cols="50%,30%,20%">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame3.html" />
</frameset>
</html>
Output:

1.25
Web Technologies - I Introduction to HTML, HTTP and PHP

Example for Horizontal frames:

<!DOCTYPE html>
<html>
<frameset rows="50%,30%,20%">
<frame src="frame1.html" />
<frame src="frame2.html" />
<frame src="frame3.html" />
</frameset>
</html>
Output:

• The <iframe> tag specifies an inline frame. An inline frame is used to embed another
document within the current HTML document.
• The <iframe> tag defines a rectangular region within the document in which the
browser displays a separate document, including scrollbars and borders.
• HTML5 has added some new attributes, and several HTML 4.01 attributes are removed
from HTML5.
Syntax: <iframe> … </iframe>
Attributes for <iframe> tag:
Attributes Value Description
1. height pixels This attribute specifies the height of an
<iframe>.
2. name text This attribute specifies the name of an
<iframe>.
3. sandbox allow-forms This attribute enables an extra set of
allow-pointer-lock restrictions for the content in an <iframe>.
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
4. src URL This attribute specifies the address of the
document to embed in the <iframe>.
5. srcdoc HTML_code This attribute specifies the HTML content of
the page to show in the <iframe>
6. width pixels This attribute specifies the width of an
<iframe>.
1.26
Web Technologies - I Introduction to HTML, HTTP and PHP

Example for inline frame:

<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.pragati.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Output:

1.1.2 Tables in HTML

• Tables are made up of rows and columns. The HTML table model allows arranging
data or information like text, images, links, forms, etc. into rows and columns of cells.
• The tables represents tabular data i.e., information/data presented in a two-
dimensional table comprised of rows and columns of cells containing data
HTML <table> Tag:
• The <table> tag defines an HTML table. An HTML table consists of the <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.
Syntax: <table>…………</table>
Attributes Value Description
1. align left This attribute specifies the alignment of a table
center according to surrounding text.
right
2. bgcolor rgb(x,x,x) This attribute specifies the background color
#xxxxxx for a table.
colorname
contd. …
1.27
Web Technologies - I Introduction to HTML, HTTP and PHP

3. border pixels This attribute specifies the width of the borders

around a table.
4. cellpadding pixels This attribute specifies the space between the
cell wall and the cell content.
5. cellspacing pixels This attribute specifies the space between cells.
6. frame void This attribute specifies which parts of the
above outside borders that should be visible.
below
hsides
lhs
rhs
vsides
box
border
7. rules none This attribute specifies which parts of the
groups inside borders that should be visible.
rows
cols
all
8. summary text This attribute specifies a summary of the
content of a table.
9. width pixels This attribute specifies the width of a table.
%

<h4>One row and three columns:</h4>

<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Output:

• Table heading can be defined using <th> tag or the <th> tag defines a header cell in an
HTML table. An HTML table has two kinds of cells:
(i) Header Cells: Contains header information (created with the <th> element), and
(ii) Standard Cells: Contains data (created with the <td> element).

1.29
Web Technologies - I Introduction to HTML, HTTP and PHP

• The <tr> tag defines a row in an HTML table. A <tr> element contains one or more <th>
or <td> elements.
• The <td> tag defines a standard cell in an HTML table. The <td> tag is used to mark up
individual cells inside a table row.
• The <caption> tag defines a table caption. The <caption> tag is used to provide a
caption for a table. This caption can either appear above or below the table.

• Tables can be divided into three portions namely a header, a body, and a foot. The
head and foot are rather similar to headers and footers in a word-processed document
that remain the same for every page, while the body is the main content of the table.
1.30
Web Technologies - I Introduction to HTML, HTTP and PHP

• The three elements for separating the head, body, and foot of a table are:
o <thead>: To create a separate table header.
o <tbody>: To indicate the main body of the table.
o <tfoot>: To create a separate table footer.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Practice HTML table footer, header and body</title>
</head>
<body>
<p>Try with different footer, heard and body parts</p>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
1.31
Web Technologies - I Introduction to HTML, HTTP and PHP

<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
</table>
</body>
</html>
Output:

• Cellspacing attribute defines the width of the border, while cellpadding attribute
represents the distance between cell borders and the content within.
Example for cellspacing and cellpadding:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "10" cellspacing = "10">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>

1.32
Web Technologies - I Introduction to HTML, HTTP and PHP

<td>Ramesh Salvi</td>
<td>5000</td>
</tr>
<tr>
<td>Amar Dube</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Output:

• We will use colspan attribute if we want to merge two or more columns into a single
column. Similar way we will use rowspan if we want to merge two or more rows.
Example for colspan amd rowspan attributes:
<!DOCTYPE html>
<html>
<head>
<title>Practice HTML table spans</title>
</head>
<body>
<p>Merge two or more rows or columns and then see the result:</p>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

1.33
Web Technologies - I Introduction to HTML, HTTP and PHP

Output:

Nested Tables:
• We can use one table inside another table is called as nesting of tables (or nested
tables). Not only tables we can use almost all the tags inside table data tag <td>.
Example for nested tables:
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested table</title>
</head>
<body>
<table border="1">
<tr>
<td>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Salvi</td>
<td>5,700</td>
</tr>
<tr>
<td>Amar Dube</td>
<td>7,500</td>
</tr>
</table>
</td>
<td>
<ul>
<li>This is another cell</li>
<li>Using list inside this cell</li>
</ul>
1.34
Web Technologies - I Introduction to HTML, HTTP and PHP

</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Output:

1.1.3 HTML Forms

• Forms are an essential part of the Internet, as they provide a way for websites to
capture or collect information from users and to process requests.
• HTML forms are one of the main elements of interaction between a user and a
website. An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
• A form is a group of controls that the user interacts with and sends the result to
specific files as designed by an application developer.
• A form can contain input elements like text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain select lists, textarea, fieldset, legend, and
label elements.
• The HTML <form> element is used to create an HTML form for user input.
Syntax:
<form>
.
.
.
input elements …
.
.
.
</form>

1.35
Web Technologies - I Introduction to HTML, HTTP and PHP

Attributes:
Attributes Value Description
1. accept file_type This attribute specifies a comma-separated
list of file types that the server accepts (that
can be submitted through the file upload).
2. accept-charset character_set This attribute specifies the character
encodings that are to be used for the form
submission.
3. action URL This attribute specifies where to send the
form-data when a form is submitted.
4. autocomplete on This attribute specifies whether a form
off should have autocomplete on or off.
5. enctype application/x- This attribute specifies how the form-data
www-form- should be encoded when submitting it to
urlencoded the server (only for method="post").
multipart/form-
data
text/plain
6. method get This attribute specifies the HTTP method to
post use when sending form-data.
7. name text This attribute specifies the name of a form.
8. novalidate novalidate This attribute specifies that the form should
not be validated when submitted.
9. target _blank This attribute specifies where to display the
_self response that is received after submitting
_parent the form.
_top Target to open the given URL:
_blank : The target URL will open in a new
window.
_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.

1.36
Web Technologies - I Introduction to HTML, HTTP and PHP

• Users interact with forms through named controls. A control's "control name" is given
by its name attribute. The <form> element can contain one or more of the form
elements: <input>, <textarea>, <button>, <select>, <option>, <fieldset>, <label> etc.
HTML <input> Tag:
• The most important form element is the <input> tag which defines an input control.
• The <input> tag are used within a <form> element to declare input controls that allow
users to input data. An input field can vary in many ways, depending on the type
attribute.
Syntax: <input type= " ">
Attributes:
Attributes Value Description
1. accept audio/* This attribute specifies the types of files that the
video/* server accepts (only for type="file").
image/*
MIME_type
2. align left This attribute specifies the alignment of an image
right input (only for type="image").
top
middle
bottom
3. alt text This attribute specifies an alternate text for an
image (only for type="image").
4. checked checked This attribute specifies that an <input> element
should be preselected when the page loads (for
type="checkbox" or type="radio").
5. disabled disabled This attribute specifies that an <input> element
should be disabled.
6. maxlength number This attribute specifies the maximum number of
characters allowed in an <input> element.
7. name name This attribute specifies the name of an <input>
element.
8. readonly readonly This attribute specifies that an input field should
be read-only.
9. size number This attribute specifies the width, in characters, of
an <input> element.
contd. …
1.37
Web Technologies - I Introduction to HTML, HTTP and PHP

10. src URL This attribute specifies the URL of the image to use
as a submit button (only for type="image").
11. type button This attribute specifies the type of <input> element.
checkbox
file
hidden
image
password
radio
reset
submit
text

12. value text This attribute specifies the value of an <input>

element.
• Various input fields are explained below:
1. Text Field: Text fields are one line areas that allow the user to input text.
Syntax: <input type = "text">
Following is the list of attributes for <input> tag.
(i) type: Indicates the type of input control you want to create. This element is also
used to create other form controls such as radio buttons and checkboxes.
(ii) name: Used to give the name part of the name/value pair that is sent to the server,
representing each form control and the value the user entered.
(iii) value: Provides an initial value for the text input control that the user will see
when the form loads.
(iv) size: Allows you to specify the width of the text-input control in terms of
characters.
(v) maxlength: Allows you to specify the maximum number of characters a user can
enter into the text box.
Example for text field:
<!DOCTYPE html>
<html>
<head>
<body>
<title>Concepts of Form</title>
<form action="/cgi-bin/hello_get.cgi" method="get">
1.38
Web Technologies - I Introduction to HTML, HTTP and PHP

First name: <input type="text" name="first_name" />

<br>
Last name: <input type="text" name="last_name" />
<br>
<input type="submit" value="submit" />
</form>
</body>
</head>
</html>
Output:

2. Password Field: Password fields are similar to text fields. The difference is that what
is entered into a password field shows up a dot on the screen. This is, of course, to
prevent others from reading the password on the screen.
Syntax: <input type = "password">
Attribute Explanation
1. size= Characters shown.
2. maxlength= Max characters allowed.
3. name= Name of the field.
4. value= Initial value in the field.
5. align= Alignment of the field.
6. tabindex= Tab order of the field.

Example for password field:

<div align="center">
Enter Password: <input type="password" size="25">
<br><br>
</div>
</form>
</body>
</html>
Output:

3. <label> Tag: The <label> tag defines a label for an <input> element.
4. <fieldset> Tag: <fieldset> tag defines a border around elements in a form. The
<fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a
box around the related elements.
Attributes:
Attribute Value Description
1. disabled disabled This attribute specifies that a group of related form
elements should be disabled.
2. form form_id This attribute specifies one or more forms the field
set belongs to.
3. name text This attribute specifies a name for the field set.

Example for <fieldset> tag: The <legend> tag defines a caption for a <fieldset> element.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend><b>User Information:</b></legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>
1.40
Web Technologies - I Introduction to HTML, HTTP and PHP

Output:

5. Hidden Field: Hidden fields are similar to text fields. The difference is that the hidden
field does not show on the page. Therefore the visitor cannot type anything into a
hidden field, which leads to the purpose of the field.
Syntax: <input typ = "hidden">
Attribute Explanation

1. name= Name of the field.

2. value= Value of the field.

Example for hidden field:

<!DOCTYPE html>
<html>
<head>
<title>MyPage</title>
</head>
<body>
<form name="myform" action=http://www.mydomain.com/myformhandler.cgi
method="POST">
<div align="center">
<input type="text" size="25" value="Enter your name here!">
<input type="hidden" name="Language" value="English">
<br><br>
</div>
</form>
</body>
</html>
Output:

6. <textarea> Tag: It defines a multi-line text input control. The size of a text area is
specified by the cols and rows attributes.
Syntax: <textarea>………</textarea>
1.41
Web Technologies - I Introduction to HTML, HTTP and PHP

Attributes for <textarea> tag are given below:

(i) name: The name of the control. This is used in the name/value pair that is sent to
the server.
(ii) rows: Indicates the number of rows of text area box.
(iii) cols: Indicates the number of columns of text area box.
Example for <textarea> tag:
<!DOCTYPE html>
<html>
<head>
<title>Concepts of Form</title>
<body>
<p> This example cannot be edited because our editor uses a textarea
for input, and your browser does not allow a textarea inside a
textarea. </p>
<textarea rows="10" cols="30"> The cat was playing in the garden.
</textarea>
</body>
</head>
</html>
Output:

7. Radio Buttons: Radio buttons are used when only one option is required to be
selected. They are created using <input> tag.
Syntax: <input type="radio">
Following is the list of important radiobox attributes:
(i) type: Indicates that you want to create a radiobox.
(ii) name: Name of the control.
(iii) value: Used to indicate the value that will be sent to the server if this option is
selected.
(iv) checked: Indicates that this option should be selected by default when the page
loads.
1.42
Web Technologies - I Introduction to HTML, HTTP and PHP

Example for radio button:

<!DOCTYPE html>
<html>
<head>
<title>Practice HTML input radiobox tag</title>
</head>
<body>
<form action="/cgi-bin/radiobutton.cgi" method="post">
<input type="radio" name="subject" value="maths" /> Maths
<input type="radio" name="subject" value="physics" /> Physics
<input type="submit" value="Select Subject" />
</form>
</body>
</html>
Output:

8. Checkbox Control: Checkboxes are used when more than one option is required to be
selected. They are created using <input> tag.
Syntax: <input type="checkbox">
Following is the list of important checkbox attributes:
(i) type: Indicates that you want to create a checkbox.
(ii) name: Name of the control.
(iii) value: The value that will be used if the checkbox is selected. More than one
checkbox should share the same name only if you want to allow users to select
several items from the same list.
(iv) checked: Indicates that when the page loads, the checkbox should be selected.
Example for checkboxes:
<!DOCTYPE html>
<html>
<head>
<title>Practice HTML input checkbox tag</title>
</head>
<body>
1.43
Web Technologies - I Introduction to HTML, HTTP and PHP

<p>Try with different checkbox and different attributes</p>

<form action="" method="get">
<input type="checkbox" name="maths" value="on" /> Maths
<input type="checkbox" name="physics" value="on" /> Physics
<input type="reset" value="Select Subject" />
</form>
</body>
</html>
Output:

9. <select>Tag: The <select> tag is used to create a drop-down list. Drop-down list is used
when we have many options available to be selected but only one or two will be
selected. The <option> tags inside the <select> element define the available options in
the list.
Syntax: <select>…………</select>
Attributes Value Description
1. disabled disabled This attribute specifies that a drop-down list should
be disabled.
2. multiple multiple This attribute specifies that multiple options can be
selected at once.
3. name name This attribute defines a name for the drop-down
list.
4. size number This attribute specifies defines the number of
visible options in a drop-down list.

Example for <select> tag:

<!DOCTYPE html>
<html>
<head>
<title>Practice HTML input selectbox tag</title>
</head>
<body>
<p>Try with different selectbox and different attributes</p>
1.44
Web Technologies - I Introduction to HTML, HTTP and PHP

<form action="" method="get">

<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
<input type="reset" value="reset" />
</form>
</body>
</html>
Output:

10. Creating Button: The <button> tag defines a push button. We can create clickable
button using <input> tag.
Syntax: <button>……………</button>
Attributes Value Description
1. disabled disabled This attribute specifies that a button should be
disabled.
2. name name This attribute specifies the name for a button.
3. type button This a3ttribute specifies the type of button. The
reset submit value creates a button that automatically
submit submits a form. The reset value creates a button
that automatically resets form controls to their
initial values. The button value creates a button that
is used to trigger a client-side script when the user
clicks that button.
4. value text This attribute specifies the initial value for a button.
Example for <button> tag:
<!DOCTYPE html>
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName"
value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>If you click the "Submit" button, the form-data will be sent
to a page called "html_form_action.asp".</p>
</body>
</html>

1.45
Web Technologies - I Introduction to HTML, HTTP and PHP

Output:

Example:
<!DOCTYPE html>
<html>
<body>
<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" /><br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
Output:

11. <option> Tag: It defines an option in a select list. The <option> tag go inside a <select>
element.
Syntax: <option>……………</option>
Attributes Value Description
1. disabled disabled This attribute specifies that an option should be
disabled.
2. label text This attribute specifies a shorter label for an
option.
3. selected selected This attribute specifies that an option should be
pre-selected when the page loads.
4. value text This attribute specifies the value to be sent to a
server.
Example for <option> tag:
<!DOCTYPE html>
<html>
<body>
<form name="myform" action="nextpage.html" method="post" >

1.46
Web Technologies - I Introduction to HTML, HTTP and PHP

<select size=1 name="mydropdown">

<option value="milk">Fresh Milk</option><br>
<option value="cheese">Old Cheese</option><br>
<option value="bread">Hot Bread</option>
</select>
</form>
</body>
</html>
Output:

Example for form using various controls:

<!DOCTYPE html>
<html>
<head>
<h3><b> EX. FORM FOR RADIO BUTTON, CHECKBOXES & PULL DOWN MENU
</b></h3>
</head>
<body>
<form action="nextpage.html" method ="post">
<h3>Enter your information:</h3>
<b><i>Enter your name:</b>
<input type=text size="25"><br>
<b><i>Your age is in between:</b><br>
<input type="radio" name="radios" value="radio1" checked>15-20 yrs<br>
<input type="radio" name="radios" value="radio2">20-25 yrs<br>
<input type="radio" name="radios" value="radio3">25 yrs and above<br>
<br><b><i>
Your Hobbies
<input type=checkbox name="option" value="read">Reading novels <br>
<input type="checkbox" name="option" value="write" checked> Writing <br>
<input type="checkbox" name="option" value="sing">Singing <br>
<br><br><b><i> Enter your city: </b>
<select>
<option value=pune> Pune </option>
<option value=mumbai> Mumbai</option>
<option value=a'nagar> Ahmednagar </option>
1.47
Web Technologies - I Introduction to HTML, HTTP and PHP

</select><br><br>
<input type="submit" name="button" value="Submit data">
</form>
</body>
</html>
Output:

1.1.4 HTML5 Semantics

• HTML5 is the latest version of HTML. Semantics is the study of the meanings of words
and phrases in a language.
• A semantic element clearly describes its meaning to both the browser and the
developer.
• HTML5 offers new semantic elements to define different parts of a web page as shown
in Fig. 1.6. HTML5 semantic elements are supported in all modern browsers.

Fig. 1.6
• Various semantic elements in HTML5 are explained below:
1. HTML5 <article> Element:
• The <article> element is used to represent an article. The <article> element specifies
independent, self-contained content.
1.48
Web Technologies - I Introduction to HTML, HTTP and PHP

• Examples of article content could include a forum post, a newspaper article, a blog
entry, or a user-submitted comment.
Syntax: <article>…..</article>

Example for <article> element:

<!DOCTYPE html>
<html>
<body>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed
by Google.</p>
</article>
<p><strong>Note:</strong> The article tag is not supported in
Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Output:

2. HTML5 <nav> Element:

• The <nav> element is new in HTML5. The HTML <nav> element is used for declaring a
navigational section of the HTML document.
• The <nav> element defines a set of navigation links.
Syntax: <nav>…</nav>

Example for <nav> element:

<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">Photoshop</a> |
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |

1.49
Web Technologies - I Introduction to HTML, HTTP and PHP

<a href="/html/">Dreamweaver</a> |
<a href="/html/">Ajax</a> |
<a href="/jquery/">jQuery</a>
</nav>
<p><strong>Note:</strong> The nav tag is not supported in
Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Output:

3. HTML5 <section> Element:

• The <section> element is used to represent a section within an article.
• The <section> element defines sections in a document, such as chapters, headers,
footers, or any other sections of the document.
Syntax: <section>…</section>
Example for <section> element:
<!DOCTYPE html>
<html>
<body>
<section>
<h1>NIRALI PRAKASHAN</h1>
<p>Nirali Prakashan specializes in quality text books from Std
II to Postgraduate levels. These books are written as per the
syllabus of Pune, Mumbai, Shivaji, Goa, North Maharashatra &
Marathwada Universities, by eminent and experienced authors in
their subjects. Besides textbooks, these books are also used
as reference books by academicians and researchers, because of
the quality of contents. Most of the books are also prescribed
as basic texts by several universities and thus, are widely
used by the student community. The subjects covered are
Management, Engineering, Pharmacy and Computer Science, Arts
and Commerce, to name a few.
Apart from publishing, Nirali has developed a wide network of
dealers & distributors to make their books readily available
to a large section of student community, all over India.

1.50
Web Technologies - I Introduction to HTML, HTTP and PHP

With its success in publishing, in a little over 25 years,

Nirali has now been able to extend its activities abroad. </p>
</section>
<section>
<h1>CONTACT US </h1>
<p>Pune Office:<br>
Abhyudaya Pragati, 1312, Shivaji Nagar,<br>
Off. J.M. Road Pune 411005,<br>
Maharashtra, India<br>
Tel: (+91-020) 25512336 / 7 / 9<br>
Fax: (+91-020) 25511379<br>
Email: [email protected]</p>
</section>
<p><strong>Note:</strong> The section tag is not supported
in Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Output:

4. HTML5 <header> Element:

• It specifies a header for a document or section. The <header> element should be used
as a container for introductory content.
Syntax: <header>…</header>
5. HTML5 <footer> Element:
• It specifies footer for a document or section. A <footer> element should contain
information about its containing element.
• Footer typically contains the author of the document, copyright information, links to
terms of use, contact information, etc.
Syntax: <footer>…</footer>
1.51
Web Technologies - I Introduction to HTML, HTTP and PHP

Example for <header> and <footer> elements:

<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<span style="color:brown;font-style:italic;">
Nirali Prakashan: Publication Firm</span>
<hr>
<h1>Engineering Books</h1>
<h4>Computer <br>
IT <br>
Civil <br></h4>
</header>
<nav></nav>
<main>
<article>
<p>Nirali Prakashan is a Text book Publication firm
since 30 years.</p>
</article>
</main>
<footer>
<hr>
© 2016 Nirali Prakashan
</footer>
</body>
</html>
Output:

1.52
Web Technologies - I Introduction to HTML, HTTP and PHP

6. HTML5 <aside> Element:

• The <aside> element defines some content aside from the content it is placed in.
• The <aside> element is used to represent content that is related to the surrounding
content within an article or web page, but could still stand alone in its own right. This
type of content is often represented in sidebars.
Syntax: <aside>…</aside>

Example for <aside> element:

<!DOCTYPE html>
<html>
<body>
<p>My family and I visited Queenstown </p>
<aside>
<h4> Queenstown </h4>
<p>The Queenstown is a city of New Zealand.</p>
</aside>
<p><strong>Note:</strong> The aside tag is not supported in
Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Output:

7. HTML5 <details> Element:

• The HTML <details> element specifies additional details that the user can view or hide
on demand.
• It can be used in conjunction with the HTML5 <summary> element to provide a
heading that can be clicked on to expand/collapse the details as required.
Syntax: <details>…</details>
8. HTML5 <summary> Element:
• The <summary> element specifies a summary/caption that can be used in conjunction
with the HTML5 <details> element.
• This summary/caption can be clicked on to expand/collapse the details as required.
The <summary> element, if used, should be the first child of the <details> element.
Syntax: <summary>…</summary>

1.53
Web Technologies - I Introduction to HTML, HTTP and PHP

Example for <details> and <summary> elements:

<!DOCTYPE html>
<html>
<body>
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Nirali Prakashan.</p>
<p>All content and graphics on this web site are the property
of the company Nirali Prakahan.</p>
</details>
<p><b>Note:</b> The details tag is not supported in Internet
Explorer.</p>
</body>
</html>
Output:

Example for HTML5 semantics:

<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}

1.54
Web Technologies - I Introduction to HTML, HTTP and PHP

nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>HTML Semantics Demo</h1>
<header>This is Header</header>

1.55
Web Technologies - I Introduction to HTML, HTTP and PHP

<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>
Output:

Embedding Multimedia in HTML:

• Multimedia is a combination of more than one media like text, graphics, images,
audio, or video, which is used for presenting, sharing, and disseminating the informa-
tion.
• The <embed> tag allows us to add Multimedia like sound, music and video files to the
web pages.
Syntax: <embed>…</embed>
Attributes:
Attribute Description
1. align This attribute determines how to align the object. It can be set to
either center, left or right.
2. autostart This Boolean attribute indicates if the media should start
automatically. You can set it either true or false.
contd. …
1.56
Web Technologies - I Introduction to HTML, HTTP and PHP

3. loop This attribute specifies if the sound should be played continuously

(set loop to true), a certain number of times (a positive value) or not at
all (false).
4. playcount This attribute specifies the number of times to play the sound. This is
alternate option for loop if you are usiong IE.
5. hidden This attribute specifies if the multimedia object should be shown on
the page. A false value means no and true values means yes.
6. width Width of the object in pixels.
7. height Height of the object in pixels.
8. name A name used to reference the object.
9. src URL of the object to be embedded.
10. volume This attribute controls volume of the sound. Can be from 0 (off) to 100
(full volume).

1.57
Web Technologies - I Introduction to HTML, HTTP and PHP

• The HTML <source> tag is used to specify multiple media resources on media elements
such as <audio> and <video>.
• The <object> tag defines an embedded object within an HTML document. Use this
element to embed multimedia (like audio, video, Java Aapplets, ActiveX, PDF, and
Flash) in the web pages.
• The HTML <audio> tag is used to specify audio on an HTML document.
Syntax: <audio>…</audio>
Attribute Value Description
1. autoplay autoplay This attribute specifies that the audio will start
playing as soon as it is ready.
2. controls controls This attribute specifies that audio controls should
be displayed (such as a play/pause button etc).
3. loop loop This attribute specifies that the audio will start over
again, every time it is finished.
4. muted muted This attribute specifies that the audio output should
be muted.
5. preload auto This attribute specifies if and how the author
metadata thinks the audio should be loaded when the page
none loads.
6. src URL This attribute specifies the URL of the audio file.

1.58
Web Technologies - I Introduction to HTML, HTTP and PHP

• The <video> tag is used to specify video on an HTML document. The <video> tag
specifies video, such as a movie clip or other video streams.
Syntax: <video>…</video>
Attributes:
Attribute Value Description
1. autoplay autoplay This attribute specifies that the video will start
playing as soon as it is ready.
2. controls controls This attribute specifies that video controls
should be displayed (such as a play/pause
button etc).
3. height pixels This attribute sets the height of the video
player.
4. loop loop This attribute specifies that the video will start
over again, every time it is finished.
5. muted muted This attribute specifies that the audio output of
the video should be muted.
6. poster URL This attribute specifies an image to be shown
while the video is downloading, or until the
user hits the play button.
7. preload auto This attribute specifies if and how the author
metadata thinks the video should be loaded when the
none page loads.
8. src URL This attribute specifies the URL of the video
file.
9. width pixels This attribute sets the width of the video
player.
Example for <video> tag:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The video tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>

1.59
Web Technologies - I Introduction to HTML, HTTP and PHP

Output:

1.2 CSS (CASCADING STYLE SHEET)

• CSS is a standard language used for describing the presentation (i.e. the layout and
formatting) of the web pages.
• The purpose of CSS is beautifying web pages and increase look and feel of them.
A Cascading Style Sheet (CSS) is a set of rules that define the layout of web pages or the
way the content is presented.
• Cascading style sheets is a language used to describe the look and formatting of a web
document written in a markup language.
• CSS's most common use is to style web pages written in HTML. These styles are set CSS
properties.
Advantages of CSS:
1. CSS Saves Time: We can write CSS once and then reuse same sheet in multiple
HTML pages. Using CSS we can define a style for each HTML element and apply it
to as many Web pages as we want which saves time for code writing.
2. Pages Load Faster: If we are using CSS, we do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster download times.
3. Easy Maintenance: To make a change, simply change the style, and all elements in
all the web pages will be updated automatically.
4. Superior Styles to HTML: CSS has a much wider array of attributes than HTML so
we can give far better look to the HTML page in comparison of HTML attributes.
5. Multiple Device Compatibility: Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
smart phones etc.
6. Global Web Standards: Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML
pages to make them compatible to future browsers.
7. Control on Web Pages: CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML document.
8. Browser Support: CSS is supported by all the browsers and search engines.

1.60
Web Technologies - I Introduction to HTML, HTTP and PHP

1.2.1 Basic Concept of CSS

• Cascading Style Sheets (CSS) is a language used for describing the presentation of a
web document written in a markup language such as HTML.
• CSS is used for formatting content on web pages and it is used to enhance the
presentation of the web pages.
• CSS handles the look and feel part of a web page. The CSS intended to simplify the
process of making web pages presentable.
• Using CSS, we can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors
are used, layout designs, and variations in display for different devices (desktop,
laptop, smart phones etc.) and screen sizes as well as a variety of other effects.
• The goal of CSS is to be able to define the styles of the various page elements, separate
from the content of the page.
• A CSS comprises of style rules that are interpreted by the browser and then applied to
the corresponding elements in the web document.
• A style rule is made of three parts as shown in Fig. 1.7 and explained below:
1. Selector: A selector is an HTML tag at which style will be applied. This could be
any tag like <h1> or <table> etc.
2. Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color or border etc.
3. Value: Values are assigned to properties. For example color property can have
value either red or #F1F1F1 etc.

Fig. 1.7
Syntax of CSS: selector { property: value }
Example: We can define a table border as follows:
table{ border:1px solid #C00; }
Here, table is a selector and border is a property and given value 1px solid #C00 is the
value of that property. We can define selectors in various simple ways based on our
comfort.
• CSS selectors are used to "find" (or select) the HTML elements we want to style. Let us
see these selectors one by one.
1. Type Selectors: A type selector sometimes referred to as an element selector
selects HTML elements based on the element name such as <p>, <h1>, <div> and so
on. The example to give a color to all level 1 headings like this:
h1 {
color: #36CFFF;
}

1.61
Web Technologies - I Introduction to HTML, HTTP and PHP

2. Universal Selectors: Rather than selecting elements of a specific type, the

universal selector quite simply matches the name of any element type. The
universal selector (*) selects all HTML elements on the page.
* {
color: #000000;
}
This rule renders the content of every element in our document in black.
3. Descendant Selectors: The descendant selector matches all elements that are
descendants of a specified element. Suppose we want to apply a style rule to a
particular element only when it lies inside a particular element. As given in the
following example, style rule will apply to <em> element only when it lies inside
<ul> tag.
ul em {
color: #000000;
}
4. Class Selectors: We can define style rules based on the class attribute of the
elements. All the elements having that class will be formatted according to the
defined rule. To select elements with a specific class, write a period (.) character,
followed by the name of the class.
.black {
color: #000000;
}
Above rule renders the content in black for every element with class attribute set
to black in our document. We can make it a bit more particular. For example:
h1.black {
color: #000000;
}
Above rule renders the content in black for only <h1> elements with class attribute
set to black.
5. ID Selectors: We can define style rules based on the id attribute of the elements.
All the elements having that id will be formatted according to the defined rule. To
select an element with a specific id, write a hash (#) character, followed by the id
of the element.
#black {
color: #000000;
}
1.62
Web Technologies - I Introduction to HTML, HTTP and PHP

This rule renders the content in black for every element with id attribute set to
black in our document. You can make it a bit more particular. For example:
h1#black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with id attribute set
to black.
The true power of id selectors is when they are used as the foundation for
descendant selectors, For example:
#black h2 {
color: #000000;
}
In above example all level 2 headings will be displayed in black color only when
those headings will lie within tags having id attribute set to black.
6. Child Selectors: The child selector selects all elements that are the children of a
specified element. Consider the following example:
body > p {
color: #000000;
}
This rule will render all the paragraphs in black if they are direct child of <body>
element. Other paragraphs put inside other elements like <div> or <td> etc. would
not have any effect of this rule.
7. Attribute Selectors: We can also apply styles to HTML elements with particular
attributes. The attribute selector is used to select elements with a specified
attribute or attribute value. The style rule below will match all input elements that
have a type attribute with a value of text:
input[type="text"]{
color: #000000;
}
The advantage to this method is that the <input type="submit" /> element is
unaffected, and the color applied only to the desired text fields.
There are following rules applied to attribute selector.
o p[lang]: Selects all paragraph elements with a lang attribute.
o p[lang="fr"]: Selects all paragraph elements whose lang attribute has a value
of exactly "fr".
o p[lang~="fr"]: Selects all paragraph elements whose lang attribute contains
the word "fr".
o p[lang|="en"]: Selects all paragraph elements whose lang attribute contains
values that are exactly "en", or begin with "en-".

1.63
Web Technologies - I Introduction to HTML, HTTP and PHP

Multiple Style Rules: We may need to define multiple style rules for a single
element. We can define these rules to combine multiple properties and
corresponding values into a single block as defined in the following example:
h1
{
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Here, all the property and value pairs are separated by a semi colon (;). We can
keep them in a single line or multiple lines.
For better readability we keep them into separate lines. For a while do not bother
about the properties mentioned in the above block.
8. Grouping Selectors: The grouping selector selects all the HTML elements with the
same style definitions. We can apply a style to many selectors if we like. Just
separate the selectors with a comma as given in the following example:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order
of the list is irrelevant. All the elements in the selector will have the corresponding
declarations applied to them.
We can combine various class selectors together as shown below:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
1.64
Web Technologies - I Introduction to HTML, HTTP and PHP

1.2.2 Three Ways to Use CSS

• When a browser reads a style sheet, it will format the HTML document according to
the information in the style sheet.
• CSS can be inserted in three ways namely, Inline CSS, Internal CSS and External CSS.
1. Inline CSS:
• An inline CSS is used to apply a unique style to a single HTML element. In HTML
document we can add inline CSS by using the style attribute inside HTML elements.
• An inline CSS we can use the style attribute of an HTML element to define style rules.
These rules will be applied to that element only. .
• The syntax for inline style sheet is given below:
<tag_name style="property1: value;
property2: value;">
</tag_name>
Example for inline CSS:
<!DOCTYPE html>
<html>
<body>
<p style="background: pink; color: blue;">
Text color is green with blue background
</p>
</body>
</html>
Output:

2. Embedded (Internal) CSS:

• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page, within
a <style> element followed by type attribute.
• The syntax for internal style sheet is given below:
<head>
<style type="text/css">
selector { property: value; }
</style>
</head>
1.65
Web Technologies - I Introduction to HTML, HTTP and PHP

Example for Internal/Embedded Stylesheet:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color: blue;
}
h1 {
color: red;
text-align: center;
}
body {
background-color: grey;
}
</style>
</head>
<body>
<h1>Internal CSS Example</h1>
<p> Now thats how CSS is inserted internally </p>
</body>
</html>
• In the above example, we inserted CSS code in the head section, using style tag. This
tells the browser that the code that follows will be style sheet code.
o Paragraph text will be blue in color.
o heading (h1) will be center aligned and text color will be red.
o body background color will be grey.
Output:

3. External CSS:
• An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, we change the look of an entire web site by changing one file.
1.66
Web Technologies - I Introduction to HTML, HTTP and PHP

• External CSS contains only CSS code and is saved with a ".css" file extension. This CSS
file is referred from HTML file using the <link> tag.
• To use an external style sheet, add a <link> tag in the <head> section of each HTML
page.
CSS Code:
p {
text-align: center;
color: white;
}
body {
background-color: green;
}
• Save the above file as sample.css
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body>
<p> This is an example for inserting CSS externally. </p>
</body>
</html>
Output:

1.2.3 CSS Box Model

• In CSS, the term “box model” is used when talking about design and layout. In CSS box
model all HTML elements can be considered as box and each box has a specific
purpose.
• The CSS box model is essentially a box that wraps around every HTML element.
• The Fig. 1.8 shows CSS box model. The CSS box model actually relies on a series of four
boxes namely, content, padding, border and margin.
o Content is the innermost box is where the text and images appear. Content box is
the area where the content is displayed, which can be sized using properties
like width and height.
1.67
Web Technologies - I Introduction to HTML, HTTP and PHP

o Padding is the second inner most box, sits outside of the content area. The padding
is the space between the content area box and the border box of the HTML
element. The size of padding box can be controlled using padding and related
properties.
o Border is the second outer most box sits inside the margin, and surrounds the
padding and content of the HTML element. The border box wraps the content and
any padding. Its size and style can be controlled using border and related
properties.
o Margin is the outermost box that consists of transparent space outside of the
border of an element. The margin box wrapping the content, padding and border
as whitespace between this box and other elements. Its size can be controlled
using margin and related properties.
Margin
Border
Padding

Content

Fig. 1.8: CSS Box Model

1.2.4 CSS Properties

• We style HTML elements via CSS properties. CSS properties are the styles used on
specified selectors.
• CSS properties can be organized into CSS rules. A CSS rule groups a set of CSS
properties together, and applies all properties to the HTML elements matched by the
CSS rule.
• There are many CSS properties we can specify for different HTML elements. In short,
a CSS property styles an aspect of an HTML element.
• A CSS property consists of a property name and a property value. The property name
comes first, then a colon, and then the value such as property_name : property_value.
• If we specify more than one CSS property, the each name - value pair is separated by a
semicolon as given below:
property_name1 : property_value1;
property_name2 : property_value2;
:
:
:
property_nameN : property_valueN;
1.68
Web Technologies - I Introduction to HTML, HTTP and PHP

CSS Text Properties: Defines how to manipulate text using CSS properties.
1. The color property is used to set the color of a text.
2. The direction property is used to set the text direction.
3. The letter-spacing property is used to add or subtract space between the letters
that make up a word.
4. The word-spacing property is used to add or subtract space between the words of
a sentence.
5. The text-indent property is used to indent the text of a paragraph.
6. The text-align property is used to align the text of a document.
7. The text-decoration property is used to underline, overline, and strikethrough
text.
8. The text-transform property is used to capitalize text or convert text to uppercase
or lowercase letters.
9. The white-space property is used to control the flow and formatting of text.
10. The text-shadow property is used to set the text shadow around a text.
CSS Font Properties: Defines how to set fonts of a content, available in an HTML element.
1. The font-family property is used to change the face of a font.
2. The font-style property is used to make a font italic or oblique.
3. The font-variant property is used to create a small-caps effect.
4. The font-weight property is used to increase or decrease how bold or light a font
appears.
5. The font-size property is used to increase or decrease the size of a font.
6. The font property is used as shorthand to specify a number of other font
properties.
CSS Background Properties: Defines how to set backgrounds of various HTML elements.
1. The background-color property is used to set the background color of an element.
2. The background-image property is used to set the background image of an
element.
3. The background-repeat property is used to control the repetition of an image in
the background.
4. The background-position property is used to control the position of an image in
the background.
5. The background-attachment property is used to control the scrolling of an image
in the background.
6. The background property is used as a shorthand to specify a number of other
background properties.

1.69
Web Technologies - I Introduction to HTML, HTTP and PHP

CSS Border Properties: The border properties allow you to specify how the border of the
box representing an element should look.
1. The border-color specifies the color of a border.
2. The border-style specifies whether a border should be solid, dashed line, double
line, or one of the other possible values.
3. The border-width specifies the width of a border.
CSS Margin Properties: Defines the space around an HTML element.
1. The margin specifies a shorthand property for setting the margin properties in
one declaration.
2. The margin-bottom specifies the bottom margin of an element.
3. The margin-top specifies the top margin of an element.
4. The margin-left specifies the left margin of an element.
5. The margin-right specifies the right margin of an element.
CSS Link Properties: Defines how to set different properties of a hyper link using CSS.
1. The :link signifies unvisited hyperlinks.
2. The :visited signifies visited hyperlinks.
3. The :hover signifies an element that currently has the user's mouse pointer
hovering over it.
4. The :active signifies an element on which the user is currently clicking.
CSS List Properties: Defines how to control list type, position, style, etc., using CSS.
1. The list-style-type allows us to control the shape or appearance of the marker.
2. The list-style-position specifies whether a long point that wraps to a second line
should align with the first line or start underneath the start of the marker.
3. The list-style-image specifies an image for the marker rather than a bullet point
or number.
4. The list-style serves as shorthand for the preceding properties.
5. The marker-offset specifies the distance between a marker and the text in the list.
CSS Table Properties: Defines how to set different properties of an HTML table using
CSS.
1. The border-collapse specifies whether the browser should control the
appearance of the adjacent borders that touch each other or whether each cell
should maintain its style.
2. The border-spacing specifies the width that should appear between table cells.
3. The caption-side captions are presented in the <caption> element. By default,
these are rendered above the table in the document. We use the caption-
side property to control the placement of the table caption.
4. The empty-cells specifies whether the border should be shown if a cell is empty.
5. The table-layout allows browsers to speed up layout of a table by using the first
width properties it comes across for the rest of a column rather than having to
load the whole table before rendering it.
1.70
Web Technologies - I Introduction to HTML, HTTP and PHP

1.2.5 CSS Navigation Bar

• A navigation bar is a user interface element within a webpage that contains links to
other sections or web pages of the website.
• A navigation bar is one of the main components of a website, because it is the first part
that the user sees when he/she enter a website and it links to the other main parts of
the website.
• A navigation bar comes under GUI that helps the visitors in accessing information. It is
the UI element on a webpage that includes links for the other sections of the website.
• A navigation bar is mostly displayed on the top of the page in the form of a horizontal
list of links.
• Using following steps, we can easily create the Navigation bar:
Step 1 : Firstly, we have to type the Html code in any text editor or open the
existing Html file in the text editor in which we want to make a Navigation
Bar.
Step 2 : Now, we have to define the <nav> tag in the <body> tag where we want to
make the bar.
Example for navigation bar:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}
li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
1.71
Web Technologies - I Introduction to HTML, HTTP and PHP

<li><a href="d:\Ty\home.html">Home</a></li>
<li><a href="d:\Ty\news.html">News</a></li>
<li><a href="d:\Ty\contact.html">Contact</a></li>
<li><a href=""d:\Ty\About.html">About</a></li>
</ul>
<p> PDEAs A.M. College </p>
<p>A background color is added to the links to show the link
area. The whole link area is clickable, not just the text.</p>
</body>
</html>
Output:

• In above example the, list-style-type: none; - Removes the bullets. A navigation bar
does not need list markers. Set margin: 0; and padding: 0; to remove browser default
settings.

1.3 INTRODUCTION TO WEB SERVER AND WEB BROWSER

• The World Wide Web (WWW), which is also known as a Web, is a collection of
websites or web pages stored in web servers and connected to the computers through
the internet.
• These websites contain text pages, digital images, audios, videos, etc. Users can access
the content of these sites from any part of the world over the internet using their
devices such as computers, laptops, smart phones etc.
• Internet (or the Web) is a massive distributed client/server information system. Web
servers and Web browsers are the basic components of the WWW or the Web.
• Web browser is an application program that displays a web document while Web
server is a program or a computer used to store, process and serve the Web pages.
• The Web browser (clients) requests for the web document then the Web server accepts
and response to the request made by a Web browser for a web document.

1.3.1 Web Server [April 16, 19, Oct. 16, 18]

• The web is a collection of files known as web pages. These web pages (or web site)
reside on a computer known as a web server.
• A web server interacts with the client through the web browser and processes
requests, sent by the client.
• The primary function of a web server is to store, process and deliver web pages to
clients.
1.72
Web Technologies - I Introduction to HTML, HTTP and PHP

• The function of a typical Web server is shown in Fig. 1.9. The communication between
client and server takes place using the HyperText Transfer Protocol (HTTP).
• To view a website, the browser sends a request to the server. On receiving the request,
the server sends (response) the appropriate web page to the client's machine.
• The client's machine (browser) receives the web page and displays onto the user's
computer screen.

Fig. 1.9: Function of a Typical Web Server

• Some leading web servers available today are listed below:
1. Apache HTTP Server is the most popular web server in the world developed by
the Apache Software Foundation. Apache web server is open source software and
can be installed on almost all operating systems including Linux, UNIX, Windows,
FreeBSD, Mac OS X and more.
2. Internet Information Services (IIS) is a high performance Web Server from
Microsoft. This web server runs on Windows NT/2000 and 2003 platforms.
3. Sun Java System Web Server from Sun Microsystems is suited for medium and
large web sites. It runs on Windows, Linux and UNIX platforms.
4. Lighttpd Web Server pronounced lighty and it is a free and open source secure
web server. Lighttpd can run on Windows, Mac OS X, Linux and Solaris operating
systems.
5. Jigsaw Web Server is open source and free and can run on various platforms like
Linux, UNIX, Windows, Mac OS etc. Jigsaw has been written in Java and can run
CGI scripts and PHP programs.
1.3.2 Web Browser [April 16, 17, 18, Oct. 16, 18]

• To view Web pages, we need a Web browser which is a software program that
requests, downloads and displays Web pages stored on a Web server.
• Web browser used to access the Internet and the WWW. It is basically used to access
and view the web pages of the various websites available on the Internet.
• A Web browser (a browser) is application software for retrieving, presenting, and
traversing information resources on the Internet and World Wide Web (WWW).
1.73
Web Technologies - I Introduction to HTML, HTTP and PHP

• A browser can be defined as, "a software used to locate, retrieve and display content
on the Internet and World Wide Web, including web pages, images, audio, video and
other files".
• Browsers are of two types as explained below:
1. Graphical Browsers: These browsers allow retrieval of text, images, audio, and
video. Navigation is accomplished by pointing and clicking with a mouse on
highlighted words and graphics. Both Netscape Navigator and Internet Explorer
are graphical browsers.
2. Text Browsers: These browsers provide access to the web in text-only mode.
Navigation is accomplished by highlighting emphasized words on the screen with
the arrow up and down keys, and then pressing the Enter key to follow the link.
Lynx is an example of text-based browser.
• Web browser is application software that allows us to view and explore information
on the web. Common and popular Web Browsers are explained below:
1. Opera ( ): Opera is a web browser developed by Opera Software. The latest
version is available for Windows, macOS, and Linux operating systems. Opera is a
fast and secure browser.
2. Internet Explorer ( ): Internet Explorer (IE) is a web browser from Microsoft. IE
was released as the default browser with Windows 95 (1995). Internet Explorer
connects your computer to the Web through an Internet connection. The browser
lets you view, print, and search for information on the Web.
3. Mozilla Firefox ( ): Firefox is a free and open source web browser developed
for Microsoft Windows, Mac OS X, and Linux (with its mobile versions available
for Android, and Firefox OS) co-ordinated by Mozilla Corporation and Mozilla
Foundation.
4. Safari ( ): Safari is web browser that was produced and developed by Apple
Inc. which functions on a Mac OX, iOS, and Windows operating system.
5. Google Chrome ( ): Google Chrome is a freeware browser developed by Google
using the WebKit layout engine.
Differences between Web Browser and Web Server:
Sr.
Web Browser Web Server
No.
1. Web browser is software which is Web server is a software which
used to browse and display web pages provides the documents when
available over the internet. requested by web browsers.
2. A web browser sends request to Web server sees and approves those
server for web based documents. requests made by web browsers and
sends the document in response.
contd. …
1.74
Web Technologies - I Introduction to HTML, HTTP and PHP

3. Web browser is installed on user's Web server can be installed anywhere

(client) machine. at remote location computer or local
location computer but it need to be on
a network.
4. Examples include Mozilla Firefox, Examples include Apache HTTP
Google Chrome, Internet Explorer, Server, Internet Information Services
Opera, Netscape Navigator etc. (IIS), Lighttpd etc.
5. Web browser sends an HTTP request Web server receives HTTP request and
and gets a HTTP response. sends a HTTP response.
6. Web browsers stores data in cookies Web servers provide an area to store
for websites. and organize the pages of the website.

1.4 HTTP BASICS

• HTTP stands for HyperText Transfer Protocol. A protocol is a set of rules that govern
the way two or more computers communicate with one another.
• HTTP is used to transfer data across the Web. HTTP is connectionless and stateless
application layer protocol.
• HTTP is the foundation for data communication for the World Wide Web or Web (i.e.
internet) since 1990. HTTP is at the heart of the Web and described in [RFC 1945] and
[RFC 2616].

Client Server
Time Client Request
Method URI HTTP-version
General-header
Request-header
Entity-header

Entity-body

Server Response
HTTP-version Status-code Reason-Phrase
General-header
Respons-header
Entity-header

Entity-body

Fig. 1.10: HTTP Transaction between the Client and Server

• HTTP specifies how clients' request data will be constructed and sent to the server, and
how the servers respond to these requests.

1.75
Web Technologies - I Introduction to HTML, HTTP and PHP

• The HTTP protocol is based on the client-server based architecture where Web
browsers act as clients and the Web server acts as a server.
• The Client (also called as HTTP client) and server (also called as HTTP server)
communicate by sending messages.
• The client sends a request message (also called as HTTP Request) to the server. The
server, in turn, returns a response message (also called as HTTP Response).
• Fig. 1.10 shows the HTTP transaction (request and response) between the client and
server.
HTTP Messages:
• HTTP message is used to show how data is exchanged between the client and the
server. It is based on client-server architecture.
• An HTTP client is a program that establishes a connection to a server to send one or
more HTTP request messages.
• An HTTP server is a program that accepts connections to serve HTTP requests by
sending an HTTP response messages.
• HTTP messages are simple, line-oriented sequences of characters. There are two types
of HTTP messages i.e. request message and response message.
• The HTTP messages sent from web clients to web servers are called request messages
while the messages from servers to clients are called response messages.
• The formats of the request and response messages are shown in Fig. 1.11.

Request line Status line

Headers Headers

A blank line A blank line

Body Body
(present only in (present only in
some messages) some messages)

(a) Request message (b) Response message

Fig. 1.11
1. HTTP Request Massage: [Oct. 16]
HTTP Requests are messages which are sent by the client or user to initiate an action
on the server. HTTP Request messages consist of following three parts:
Request Line: The first line of the header is called the request line. The request line
looks like this:
GET/index.html HTTP/1.1
This line specifies the HTTP method followed by address of the document requested
and the version of the HTTP.
1.76
Web Technologies - I Introduction to HTML, HTTP and PHP

Request Headers: The HTTP Request Header contains optional header information
sent by the client like MIME type the browser accepts, information about the web
browser etc.
For example: Accept: image/gif, image/jpeg, text/*, */*
Accept-Language: en-us
Host: www.example.com
User-Agent: Mozilla (x11; I; Linux 2.0.32 i586)
After header the HTTP request contains a blank line which indicates the end of the
header section.
Request Body: In case of GET method the HTTP request body is empty, and with the
POST method it contains additional data. Message body is optimal in HTTP request.
2. HTTP Response Message: The web server receives the request from client, processes
it and sends a response back to the client browser through Response message.
Status Line: The first line is called status line which looks like this:
HTTP/1.1 200 OK
This line specifies the protocol version, a status code, and a description of that code. In
this case, the status code is “200”, meaning that the request was successful (hence the
description “OK”).
Response Headers: The response header gives client additional information about
the response like information about the web server software, MIME type of the data
included in the response etc.
For example: Date: Sat, 26 Jan 2002 20:25:12 GMT
Server: Apache 1.3.22 (Unix) mod_perl/1.26 PHP/4.1.0
Content-Type: text/html
Content-Length: 141
After header the HTTP request contains a blank line which indicates the end of the
header section.
Response Body: If the response was successful, the HTTP response body contains the
HTML code, ready for the browser interpretation. If unsuccessful, a failure code is
sent.
Example for HTTP Request Message and HTTP Response Message: HTTP request to
fetch hello.htm page from the web server running on niraliprakashan.com. The HTML
code given below:
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
1.77
Web Technologies - I Introduction to HTML, HTTP and PHP

Client Request:
GET /hello.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.niraliprakashan.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Server Response:
HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
Content-Length: 88
Content-Type: text/html
Connection: Closed

1.5 PHP BASICS [April 19]

• PHP is a server side scripting language which is used to create dynamic and
interactive web pages.
• A script is a set of programming instructions that is interpreted at runtime. A scripting
language is a language that interprets scripts at runtime.
• Server side scripts are interpreted on the server while client side scripts are
interpreted by the client.
• PHP is a server side script that is interpreted on the server while JavaScript is an
example of a client side script that is interpreted by the client browser.
• PHP is a recursive acronym for "PHP: Hypertext Preprocessor". PHP is an open-source,
interpreted, and object-oriented scripting language that can be executed at the
server-side.
• PHP files can contain text, HTML, CSS, JavaScript, and PHP code. PHP codes are
executed on the server, and the result is returned to the browser as plain HTML. PHP
files have extension ".php".
• PHP 7 is a major release of PHP programming language in 2015 and is touted to be a
revolution in the way web applications can be developed and delivered for mobile to
enterprises and the cloud.
• The latest version of PHP is PHP 8 was released on November 26, 2020. Facebook,
Flickr and Yahoo are the examples of PHP applications.
• PHP is a server side scripting language that is embedded in HTML. It is used to manage
dynamic content, databases, session tracking, even build entire e-commerce sites.
1.78
Web Technologies - I Introduction to HTML, HTTP and PHP

• PHP is integrated with a number of popular databases, including MySQL, PostgreSQL,

Oracle, Sybase, Informix, and Microsoft SQL Server.
• The basic architecture of a PHP web application and how the server handles the
requests is shown in Fig. 1.12.

(1) Client page request

File
Yes contains
PHP
scripts?

(2) Decision making No (3) HTML

based on requested output
page code content returned to
browser

Fig. 1.12: Basic Architecture of PHP Web App

• We use PHP because of following reasons:
1. PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
2. PHP supports many databases, including MySQL, PostgreSQL, Oracle, Sybase,
Informix, and Microsoft SQL Server.
3. PHP is free and open source. Download it from the official PHP resource
www.php.net without any charge.
4. PHP is easy to learn and runs efficiently on the server side.
5. PHP is compatible with almost all servers used today (Apache, IIS, etc.)
Advantages of PHP: [Oct. 17]
1. Speed: It is relative fast since it uses much system resource.
2. Easy to use: It uses C like syntax, so for those who are familiar with C, it’s very
easy for them to pick up and to create a website.
3. Stable: Since it is maintained by many developers, so when bugs are found, it can
be quickly fixed.
1.79
Web Technologies - I Introduction to HTML, HTTP and PHP

4. Platform independent: Can be run on many platforms, including Windows, Linux

and Mac, it’s easy for users to find hosting service providers.
5. Open source: It is developed and maintained by a large group of PHP developers,
this will helps in creating a support community, abundant extension library.
6. Built-in database connection modules: We can connect to database easily using
PHP, since many websites are data/content driven, so we will use database
frequently, this will largely reduce the development time of web apps.
7. Powerful library support: You can easily find functional modules you need such
as PDF, Graph etc.
Disadvantages of PHP:
1. Security: Since it is open sourced, so all people/user can see the source code, if
there are bugs in the source code, it can be used by people to explore the weakness
of PHP
2. Weak type: Implicit conversion may surprise unwary programmers and lead to
unexpected bugs. For example, the strings “1000” and “1e3” compare equal
because they are implicitly cast to floating point numbers.
3. Not suitable for large applications: Hard to maintain since it is not very
modular.
1.5.1 Uses of PHP
• Common uses of PHP are listed below:
1. PHP performs system functions, i.e. from files on a system it can create, open, read,
write, and close them.
2. Using PHP we can handle forms, i.e. gather data from files, save data to a file.
3. PHP is used for creating dynamic website.
4. Using PHP, we can restrict users to access some pages of the website.
5. PHP is used to interacting with web server (Apache, IIS etc.).
6. PHP is used for connect web application with Database like MySQL, DB2,
PostgreSQL etc. We add, delete, and modify elements within the database
through PHP.
7. PHP can be used for encrypt data.
8. PHP usually used to output HTML code to the browser.
9. Using PHP we can access cookies variables and set cookies.
1.5.2 Features of PHP [April 17]

• Features of PHP are listed below:

1. Performance: PHP script is executed much faster than other scripting languages
such as JSP and ASP.
2. Database Connectivity: PHP supports all the leading databases such as MySQL,
SQLite, PostgreSQL DB2, etc.
1.80
Web Technologies - I Introduction to HTML, HTTP and PHP

3. Existing Libraries Support: Lot of functions for common web development task
e.g. Sending E-mail, XML parsing etc.
4. Portability: PHP support on all major operating system like Windows, Mac OS,
Linux etc. A PHP application developed in one operating system can be easily
executed in other operating system also.
5. Simplicity: In PHP there is no need to include libraries, special compilation
directives, or anything of the sort.
6. Efficiency: PHP is efficient in a multiuser environment such as the WWW. PHP
also support object-oriented programming with similar syntax and feature as C++
and Java.
7. Flexibility: Because PHP is an embedded language, it is extremely flexible towards
meeting the needs of the developer. PHP code can be easily embedded within
HTML tags and script.
8. Familiarity: In PHP many of the language’s constructs are borrowed from C and
Perl. PHP has easily understandable syntax. Programmers are comfortable coding
with it.
9. Security: PHP is a secure scripting language to develop the website. It consists of
multiple layers of security to prevent threads and malicious attacks.
10. Open Source: PHP source code and software are freely available on the web.
Anyone can develop all the versions of PHP according to his/her requirement
without paying any cost.

1.5.3 Syntax of PHP

• PHP script is executed on the server, and the plain HTML result is sent back to the
browser.
• A PHP script can be placed anywhere in the document. A PHP programming script
starts with <? php and ends with ?>. Every PHP command ends with a semicolon (;).
<?php
// PHP code goes here with PHP commands…;
?>
• The default file extension for PHP files is ".php". A PHP file normally contains HTML
tags and some PHP scripting code.
• Below, we have an example of a simple PHP file, with a PHP script that uses a built-in
PHP function "echo" to output the text "Hello World!" on a web page.
Example for first PHP program:
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
1.81
Web Technologies - I Introduction to HTML, HTTP and PHP

<?php
echo "Hello PHP";
?>
</body>
</html>
Output:

• PHP code can be included or embedded into webpage in following ways:

1. XML style <?php ……… ?>
2. SGML style <? ……… ?>
3. ASP style <% ……… %>
4. Script style <script language = "PHP"> PHP Code ……… </script>
• On Linux platform we directly execute PHP program. On Windows Environment we
can use XAMPP web server to run PHP program. XAMPP is an open-source, cross-
platform web server.
• XAMPP stands for Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) and Perl (P).
XAMPP is a software distribution which provides the Apache web server, MySQL
database (actually MariaDB), PHP and Perl (as command-line executables and Apache
modules) all in one package.

1.6 LEXICAL STRUCTURE

• The lexical structure of a programming language is the set of basic rules that governs
how you write programs in that language.
• A PHP program consists of tokens. Token is a smallest unit of a program such as
numbers, strings, variables, constants, operators, delimiters, and keywords etc.
1.6.1 Case Sensitivity
• PHP is a case sensitive language. Case sensitivity defines whether uppercase and
lowercase letters are treated as distinct (case-sensitive) or equivalent (case-
insensitive).
• The names of user defined classes and functions as well as built in constructs and
keywords are case insensitive. But variables on the other hand are case sensitive.
i.e. echo(“hello”)
ECHO(“hello”)
ECHO(“hello”)
• All above three statements are same. But variable names $name, $NaME and $NAME
are three different variables.
1.82
Web Technologies - I Introduction to HTML, HTTP and PHP

1.6.2 Statements and Semicolons

• A statement is a collection of PHP code that does something. PHP uses semicolons (;) to
separate simple statements.
• A compound statement uses curly braces to mark start and end of the statement and in
this case semicolon is not required after closing brace.
• For example:
<?php
echo “hello”;
$a=1;
$name=“PHP”;
$b=$a*$b;
echo $b
?>
• Semicolon is not required for last statement of the PHP code i.e. before closing PHP
tag. It’s good practice to include optional semicolons, as they make it easier to add
code later.

1.6.3 White Space and Line Breaks

• White space in PHP is used to separate tokens in PHP source file. It is used to improve
readability of the source code.
• In PHP, there is no restriction on usage of white spaces. We can use this facility to
make the code more readable.
For example: names($a, $b, $c);
• We can write same statement as follows:
names($a,
$b,
$c,
);
• To create a line break in PHP, all we have to do is put the code '<br>' in the echo
statement.

1.6.4 Comments
• Comments give information to people who read the code, but they are not interpreted
by PHP engine.
• Comments in PHP programming language is used to describe code and make simple to
understand other programmer/users and it is ignore by compiler or interpreter.
• PHP supports 'C', 'C++' and Unix shell-style (Perl style) comments.

1.83
Web Technologies - I Introduction to HTML, HTTP and PHP

For example:
<?php
echo 'This is a test'; // This is a one-line C++ style comment
# Shell-style comment
/* This is a multi line comment.
This is a C style comment.
Yet another line of comment */
echo 'This is yet another test';
echo 'One Final Test'; # This is a one-line shell-style comment
?>
• When PHP encounters two slash characters (//) within the code, everything from the
slashes to the end of the line or the end of the section of code, whichever comes first, is
considered a comment. This method of commenting is derived from C++. The result is
the same as the shell comment style.
• PHP supports block comments, whose syntax comes from the C programming
language.
• When PHP encounters a slash followed by an asterisk (/*), everything after that until it
encounters an asterisk followed by a slash (*/) is considered a comment.
• When PHP encounters a hash mark (#) within the code, everything from the hash
mark to the end of the line or the end of the section of PHP code (whichever comes
first) is considered a shell-style comment.
• The shell-style comment is found in Unix shell scripting languages and is useful for
annotating single lines of code or making short notes.

1.6.5 Literals
• A literal is a data value in PHP that appears directly in a program.
• For example:
“Hello”
100
true
null

1.6.6 Identifiers
• An identifier is simply a name. In PHP, identifiers are used to name variables,
functions, constants, and classes.
• The first character of an identifier must be an ASCII letter (a-z, A-Z), the underscore
character (_) or any character between ASCII Ox7F and ASCII OxFF. After the initial
character, combinations of these previous characters and the digits 0-9 are valid.

1.84
Web Technologies - I Introduction to HTML, HTTP and PHP

1. Variable Names: Variables in PHP starts with a dollar sign ($). The variable name
is case sensitive.
Valid Variable Names:
$bill
$bill_amt
$GrossSal
$_underscore
Invalid Variable Names:
$not valid
$7X
Following valid variables are all different:
$Net_sal
$net_sal
$net_sal
$NET_SAL
2. Function Names: Function names are not case sensitive. And so following
function names refer to the same function:
For example: howdy(), Howdy(), HOWDY(), HOWdy()
3. Class Names: Class names follow the standard rules for PHP identifiers and are
not case sensitive.
For example,
person or Person is same
Account or Account is same
1.6.7 Constants [April 18]
• A constant is a name or an identifier for a simple value. A constant value cannot
change during the execution of the PHP script.
• A constant is case-sensitive by default. By convention, constant identifiers are always
uppercase. Only single values i.e. scalars can be constants, like Boolean, integer,
double, string etc.
• In PHP we use the define() function to create a constant. It defines constant at run
time.
Syntax: define("constant_Name", Value)
For example,
define(‘PI’, 3.14);
echo PI;
• In PHP the const keyword also defines constants at compile time. It is a language
construct not a function. It is always case sensitive.
1.85
Web Technologies - I Introduction to HTML, HTTP and PHP

For example,
<?php
const MESSAGE="Hello const by PHP";
echo MESSAGE;
?>

1.6.8 Keywords [Oct. 17]

• Words reserved by the language for its core functionality are called as keyword or
reserved word.
• In PHP, keywords are case insensitive. A keyword is a word reserved by the language
for its core functionality - we cannot give a variable, function, class, or constant the
same name as a keyword.
• Some examples of keywords in PHP are given below:
break exception new
case while or
catch endwhile public
class exit( ) static
do function switch
for if throw
endfor else try
extends elseif var

1.7 LANGUAGE BASICS

• PHP is an open source, server side scripting language. PHP is one of the most popular
scripting languages of the last couple of years for developing web application (Web
Apps).
• A Web application is a computer software or program that performs some specific
tasks at its client by using a Web browser.
• Web applications are usually based on the client-server architecture where the client
input/request data while the server stores and responds with result.
• PHP is an interpreted language, i.e. there is no need for compilation. In this section we
will basic language concepts of PHP.

1.7.1 Data Types [Oct. 17, April 18]

• A data type is defined as "a set of values and the allowable operations on those values".
The data type determines the operations that we can perform on it.
• PHP data types are used to hold different types of data or values. PHP data types
define the type of data a variable can store.
1.86
Web Technologies - I Introduction to HTML, HTTP and PHP

• PHP supports eight primitive types as shown in Fig. 1.13 and given below:
o Four scalar data types: integer, float (floating-point number, aka double), string,
and Boolean.
o Two compound data types: array and object.
o Two special data types: resource and NULL.
Data Types

Scalar Data Types Special Data Types Compound Data Types

Integer Null Array

Float Resource Object

String

Boolean

Fig. 1.13: Data Types in PHP

• Let us see above data types in detail:
1. Integers:
• The integer data type is used to specify a numeric value without a fractional
component.
• The range of integers in PHP is equivalent to the range of the long data type in C. On
32-bit platforms, integer values can range from –2,147,483,648 to +2,147,483,647.
• Integers can be written in decimal, octal or hexadecimal. If it is decimal, it is just the
number. If it is octal, then number should precede with (zero) 0. If it is hexadecimal
then precede with OX.
• PHP does not support unsigned integers. Integer size can be determined using the
constant PHP_INT_SIZE.
• In PHP, is_int( ) or is_integer( ) are used to test whether a value is an integer.
<?php
if(is_int($a))
{
echo”Number is an integer”;
}
? >
2. Floating Point Numbers:
• Floating point numbers are real numbers, representing numeric values with decimal
digits.
• Usually, this allows numbers between 1.7E − 308 and 1.7E + 308 with 15 digits of
accuracy.

1.87
Web Technologies - I Introduction to HTML, HTTP and PHP

• PHP recognizes floating point numbers written in two different formats:

(i) Common Format:
3.14, 0.25
(ii) Scientific Format:
17.0E-3 // 17.0*10-3, or 0.017
• Use the is_float( ) function (or its is_real( ) alias) to test whether a value is a floating
point number:
if (is_float($x))
{
// $x is a floating-point number
}
3. Strings:
• A string is a sequence of characters where a character is the same as a byte. PHP only
supports a 256-character set.
• String literals are delimited by either single (‘…’) or double quotes (“…”).
For example: 'Hello PHP' and "Hello PHP" is same.
• Variables are expanded within double quotes not within single quote.
$a=“Good”;
echo “$a, morning \n”;
echo ‘$a, morning’;
Output:
Good, morning
$a, morning
• Use is_string( ) function to test whether the value is string or not.
if(is_string($x))
{
// $x is a string
}
4. Boolean:
• Boolean value can be either TRUE value or FALSE value. Both are case-insensitive.
For example:
<?php
$x = True; // assign the value TRUE to $x
?>
• In PHP, is_bool( ) function is used to test whether value is Boolean or not.
$x = True;
if(is_bool($X))
{
// $x is boolean;
}

1.88
Web Technologies - I Introduction to HTML, HTTP and PHP

• In PHP, the following values are false:

o The keyword false.
o The integer 0.
o The floating-point value 0.0.
o The empty string ("") and the string "0".
o An array with zero elements.
o An object with no values or functions.
o The NULL value.
5. Arrays:
• An array stores group of values under single variable name. In PHP array is a
collection of the different type of values.
• The values can be identified by position or some identifying name called as
associative.
$a = array(‘A’, ‘B’, ‘C’);
$b = array(‘First’ ⇒ ‘A’,
‘Second’ ⇒ ‘B’
‘Third’ ⇒ ‘C’);
$a is indexed array and elements are recognized by index starting with 0.
i.e. $a[0]=”A”;
$a[1]=”B”;
$a[2]=”C”;
$b is associative array in which key and value both are given.
i.e. $b[‘First’] = “A”;
$b[‘Second’] = “B”;
$b[‘Third’] = “C”;
foreach loop is most common in arrays.
i.e. foreach ($a1 as $value1)
{
echo “Hello, $a1 \n”;
}
6. Objects:
• PHP supports Object Oriented Programming (OOP). Objects are the special instances of
the classes that are created by user.
• Object is a term used in association with classes. A class is a definition of a structure
that contains properties (variables) and methods (functions).
• Classes are defined with the ‘class’ keyword. Once a class is defined, any number of
objects can be made from it with the ‘new’ keyword.
• Objects properties and methods can be accessed with the → construct.

1.89
Web Technologies - I Introduction to HTML, HTTP and PHP

For example:
class Person
{
public $name = ‘ ‘;
function name ($newname)
{
$this → name = $newname;
}
}
$p = new Person();
$p->name(“Amar”);
echo “Hello $p->name”;
Output:
Hello Amar
• Use is_object() to test whether a value is an object.
if(is_object($x))
{
// $x is an object
}
7. Resource: [April 16]
• The resource is a special PHP data type that refers to external resource (e.g. file, image
etc.) which is not part of the PHP native language.
• It is basically used for dealing with the outside world. Resources are created and used
by special functions.
• For example, database connection function returns a resource which is used to
identify that connection when we call the query and close functions.
• Their main benefit is that they’re garbage collected when no longer in use. When the
last reference to a resource value goes away, the extension that created the resource is
called to free any memory, close any connection, etc. for that resource.
For example,
$result = database_connect( );
database_query ($result);
$result=”something”; // connection is closed.
• Use the is_resource( ) function to test whether a value is a resource:
if (is_resource($x))
{
// $x is a resource
}

1.90

Notes CA403 Object Oriented Programming Using C Sybbaca
No ratings yet
Notes CA403 Object Oriented Programming Using C Sybbaca
49 pages
Sample 19571
No ratings yet
Sample 19571
16 pages
Programming World Wide Web
25% (8)
Programming World Wide Web
2 pages
Bba Ca
No ratings yet
Bba Ca
68 pages
7) TYBBA (CA) - Syllabus of Sem V AND VI - 08.07.2021
No ratings yet
7) TYBBA (CA) - Syllabus of Sem V AND VI - 08.07.2021
34 pages
Sample 19572
No ratings yet
Sample 19572
16 pages
DCC Vol 2 - Technical Publication
No ratings yet
DCC Vol 2 - Technical Publication
51 pages
Software Engineering (Syllabus)
No ratings yet
Software Engineering (Syllabus)
3 pages
B.B.A. (C. A.) 2019 Pattern Sem 6
100% (1)
B.B.A. (C. A.) 2019 Pattern Sem 6
12 pages
SPPU SE Computer Engineering 2015 Pattern Course Syllabus
No ratings yet
SPPU SE Computer Engineering 2015 Pattern Course Syllabus
69 pages
Web Tech
No ratings yet
Web Tech
20 pages
Pear DB
No ratings yet
Pear DB
29 pages
DST Nirali Publication
No ratings yet
DST Nirali Publication
85 pages
Unit - I Introduction and Web Development Strategies
No ratings yet
Unit - I Introduction and Web Development Strategies
12 pages
N3886 Android Programming BCA Science Sem 6
No ratings yet
N3886 Android Programming BCA Science Sem 6
11 pages
PHP - The Complete Reference -Steven Holzner; Curvebreakers
No ratings yet
PHP - The Complete Reference -Steven Holzner; Curvebreakers
612 pages
PHP Unit1
No ratings yet
PHP Unit1
23 pages
CG PDF
100% (1)
CG PDF
63 pages
OS LEVEL VIRTUALIZATION
No ratings yet
OS LEVEL VIRTUALIZATION
134 pages
CS8651 - IP - Notes - Unit 4
No ratings yet
CS8651 - IP - Notes - Unit 4
90 pages
PHP Lab Manual
No ratings yet
PHP Lab Manual
11 pages
DHTML Positioning
No ratings yet
DHTML Positioning
11 pages
ADVANCE JS
No ratings yet
ADVANCE JS
6 pages
IP Full Notes
No ratings yet
IP Full Notes
652 pages
Tybca OOSE Notes
No ratings yet
Tybca OOSE Notes
49 pages
ch-2 PHP
No ratings yet
ch-2 PHP
33 pages
Web Technology Notes New PDF
No ratings yet
Web Technology Notes New PDF
89 pages
PHP
No ratings yet
PHP
130 pages
Co6i-Eti-Unit 3 Notes
No ratings yet
Co6i-Eti-Unit 3 Notes
15 pages
Web Content Development Notes BCA VI Semester NEP
No ratings yet
Web Content Development Notes BCA VI Semester NEP
14 pages
Unit - 2 Notes FSW
No ratings yet
Unit - 2 Notes FSW
29 pages
Lab Manual Bca 3 Sem Data Structures-I
No ratings yet
Lab Manual Bca 3 Sem Data Structures-I
16 pages
ACN Unit - 5 Notes
No ratings yet
ACN Unit - 5 Notes
25 pages
12th Computer Science EM XII - 20.02.2019 PDF
No ratings yet
12th Computer Science EM XII - 20.02.2019 PDF
360 pages
Software testing Notes
No ratings yet
Software testing Notes
68 pages
Syllabus - CPR 9017
No ratings yet
Syllabus - CPR 9017
5 pages
DAA-2020-21 Final Updated Course File
No ratings yet
DAA-2020-21 Final Updated Course File
49 pages
C-Variables, Data Types, Introduction To Programming
No ratings yet
C-Variables, Data Types, Introduction To Programming
28 pages
Java EE694c
100% (1)
Java EE694c
8 pages
Jquery Print
No ratings yet
Jquery Print
101 pages
CSC209 PHP-MySQL LECTURE NOTE PDF
No ratings yet
CSC209 PHP-MySQL LECTURE NOTE PDF
70 pages
TYBSc (CS) WT - DA Practical Slips
No ratings yet
TYBSc (CS) WT - DA Practical Slips
68 pages
WT
100% (1)
WT
301 pages
Pps Practical File
100% (1)
Pps Practical File
61 pages
Chapter 01
No ratings yet
Chapter 01
43 pages
THEORY FILE - Android Programming (6th sem) !!
No ratings yet
THEORY FILE - Android Programming (6th sem) !!
30 pages
PWP Nirali
No ratings yet
PWP Nirali
189 pages
AJAVA Unit 1
No ratings yet
AJAVA Unit 1
51 pages
AJAX
No ratings yet
AJAX
8 pages
PHP
100% (1)
PHP
131 pages
PPL UNIT 2 Notes
No ratings yet
PPL UNIT 2 Notes
66 pages
Unit Ii Notes
No ratings yet
Unit Ii Notes
49 pages
B. SC Computer Science
100% (1)
B. SC Computer Science
5 pages
Artificial-Intelligence-lab 7TH SEMESTER
No ratings yet
Artificial-Intelligence-lab 7TH SEMESTER
24 pages
Php&mysql-Lab Manual
No ratings yet
Php&mysql-Lab Manual
48 pages
BCA 6TH Sem Artificial Intelligence
No ratings yet
BCA 6TH Sem Artificial Intelligence
2 pages
Web Technology - ISolved Practical Slips
100% (1)
Web Technology - ISolved Practical Slips
30 pages
The Datadog Handbook: A Guide to Monitoring, Metrics, and Tracing
From Everand
The Datadog Handbook: A Guide to Monitoring, Metrics, and Tracing
Robert Johnson
No ratings yet
Java servlet Second Edition
From Everand
Java servlet Second Edition
Gerardus Blokdyk
No ratings yet
Building Websites with VB.NET and DotNetNuke 4
From Everand
Building Websites with VB.NET and DotNetNuke 4
Daniel N. Egan
1/5 (1)
Nature Reviews Materials Template PDF
No ratings yet
Nature Reviews Materials Template PDF
3 pages
Quarkxpress Keyboard Command Guide: For Windows
No ratings yet
Quarkxpress Keyboard Command Guide: For Windows
19 pages
LaTeX - Math
No ratings yet
LaTeX - Math
19 pages
It Sample Paper
No ratings yet
It Sample Paper
5 pages
Keyboard Shortcuts To Use On A Windows/PC Computer
No ratings yet
Keyboard Shortcuts To Use On A Windows/PC Computer
2 pages
Internship Report Guideline (4) 20150427
No ratings yet
Internship Report Guideline (4) 20150427
12 pages
Fonts: Opentype Math Illuminated
No ratings yet
Fonts: Opentype Math Illuminated
10 pages
Display Style in Math Mode - Overleaf, Online LaTeX Editor
No ratings yet
Display Style in Math Mode - Overleaf, Online LaTeX Editor
7 pages
IJMOT Manuscript Template
100% (1)
IJMOT Manuscript Template
3 pages
AGILE Typography Font
No ratings yet
AGILE Typography Font
58 pages
NIST Typefaces For Symbols in Scientific Manuscripts
No ratings yet
NIST Typefaces For Symbols in Scientific Manuscripts
2 pages
Formatting Page Numbers For Dissertation
100% (2)
Formatting Page Numbers For Dissertation
6 pages
4.3office Buttons
No ratings yet
4.3office Buttons
51 pages
Manuscript Preparation Guidelines
No ratings yet
Manuscript Preparation Guidelines
5 pages
Shortcuts For Selecting Cells, Rows and Columns and Objects
No ratings yet
Shortcuts For Selecting Cells, Rows and Columns and Objects
21 pages
LESSON 1 and EXERCISES (1-5) May 5, 2020 (TUESDAY)
No ratings yet
LESSON 1 and EXERCISES (1-5) May 5, 2020 (TUESDAY)
8 pages
FIT Practical Record Key
No ratings yet
FIT Practical Record Key
36 pages
University of Cagayan Valley: College of Information Technology
No ratings yet
University of Cagayan Valley: College of Information Technology
15 pages
Guidelines For Author Article Title: First Author, Second Author, and Third Author
No ratings yet
Guidelines For Author Article Title: First Author, Second Author, and Third Author
4 pages
2025 Grade 4 Exams
No ratings yet
2025 Grade 4 Exams
4 pages
Final Grade 6 ICT Revised Text Book
No ratings yet
Final Grade 6 ICT Revised Text Book
58 pages
AMA Style - Tables Figures UPDATED
No ratings yet
AMA Style - Tables Figures UPDATED
2 pages
Font Awesome
No ratings yet
Font Awesome
12 pages
Lab Manual 4
No ratings yet
Lab Manual 4
25 pages
Tedds Quick Start Guide (AU)
No ratings yet
Tedds Quick Start Guide (AU)
52 pages
Mhchem
No ratings yet
Mhchem
29 pages
Project Report Format 2017-18
No ratings yet
Project Report Format 2017-18
18 pages
Manual For Monthly Authors
No ratings yet
Manual For Monthly Authors
11 pages
Adobe InDesign CS4 Styles How to Create Better Faster Text and Layouts Rough Cuts Edition Michael Murphy pdf download
100% (2)
Adobe InDesign CS4 Styles How to Create Better Faster Text and Layouts Rough Cuts Edition Michael Murphy pdf download
62 pages
Beatrice Display
No ratings yet
Beatrice Display
21 pages