1 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.

CS 2017-20 Batch)

UNIT –I
Introduction web-documents
WEB -PAGE
Web page is a document available on World Wide Web. Web Pages are stored on web server
and can be viewed using a web browser. A web page can contain huge information including
text, graphics, audio, video and hyperlinks. These hyperlinks are the link to other web pages.
Collection of linked web pages on a web server is known as website.
Mainly classified into

 Static webpages
 Dynamic webpages

Static Web page

Static web pages are also known as flat or stationary web page. They are loaded on the
client’s browser as exactly they are stored on the web server. Such web pages contain only
static information. User can only read the information but can’t do any modification or interact
with the information.

Static web pages are created using only HTML. Static web pages are only used when the
information is no more required to be modified.

Dynamic Web page

Dynamic web page shows different information at different point of time. It is possible to
change a portaion of a web page without loading the entire web page. It has been made
possible using Ajax technology.

Server-Side Dynamic Web Page

It is created by using server-side scripting. There are server-side scripting parameters that
determine how to assemble a new web page which also include setting up of more client-side
1

processing.
Page
 2 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Client-Side Dynamic Web Page

It is processed using client side scripting such as JavaScript. And then passed in to Document
Object Model (DOM).

WEB PROGRAMMING: SCRIPTING LANGUAGES

Scripting languages are like programming languages that allow us to write programs in form
of script. These scripts are interpreted not compiled and executed line by line.
Scripting language is used to create dynamic web pages.

Client-side Scripting
Client-side scripting refers to the programs that are executed on client-side. Client-side
scripts contains the instruction for the browser to be executed in response to certain user’s
action.
Client-side scripting programs can be embedded into HTML files or also can be kept as
separate files.
2
Page
 3 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Following table describes commonly used Client-Side scripting languages:

S.N. Scripting Language Description

1. JavaScript
It is a prototype based scripting language. It inherits its naming conventions from
java. All java script files are stored in file having .jsextension.

2. ActionScriptIt is an object oriented programming language used for the

development of websites and software targeting Adobe flash player.

3. Dart
It is an open source web programming language developed by Google. It relies on
source-to-source compiler to JavaScript.

4. VBScript
It is an open source web programming language developed by Microsoft. It is
superset of JavaScript and adds optional static typing class-based object oriented
programming.

Server-side Scripting
Sever-side scripting acts as an interface for the client and also limit the user access the
resources on web server. It can also collects the user’s characteristics in order to customize
response.
3
Page
 4 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Following table describes commonly used Server-Side scripting languages:

S.N. Scripting Language Description

1. ASP
Active Server Pages (ASP)is server-side script engine to create dynamic web pages.
It supports Component Object Model (COM) which enables ASP web sites to
access functionality of libraries such as DLL.

2. ActiveVFP
It is similar to PHP and also used for creating dynamic web pages. It uses
native Visual Foxpro language and database.

3. ASP.net
It is used to develop dynamic websites, web applications, and web services.

4. Java
Java Server Pages are used for creating dynamic web applications. The Java code is
compiled into byte code and run by Java Virtual Machine (JVM).

5. Python
It supports multiple programming paradigms such as object-oriented, and functional
programming. It can also be used as non-scripting language using third party tools
such as Py2exe or Pyinstaller.

6. WebDNA
It is also a server-side scripting language with an embedded database system.

Differences between client-side scripting and server-side scripting

Basis For
Server-Side Scripting Client-Side Scripting
Comparison

Basic Works in the back end which could not Works at the front end and script
be visible at the client end. are visible among the users.

Processing Requires server interaction. Does not need interaction with

the server.

Languages PHP, ASP.net, Ruby on Rails, HTML, CSS, JavaScript, etc.

involved ColdFusion, Python, etcetera.

Affect Could effectively customize the web Can reduce the load to the server.
pages and provide dynamic websites.
4

Security Relatively secure. Insecure

Page
 5 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

HTML 5
HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a
programming language, but rather a mark-up language.

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop that have been
previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft
Silverlight, and Google Gears.
Browser Support
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support
many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5
functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all
have excellent support for HTML5.
HTML5 comes with a lot of flexibility and it supports the following features

 Uppercase tag names.

 Quotes are optional for attributes.
 Attribute values are optional.
 Closing empty elements are optional.
The DOCTYPE
DOCTYPEs in older versions of HTML were longer because the HTML language was SGML
based and therefore required a reference to a DTD.
HTML 5 authors would use simple syntax to specify DOCTYPE as follows −

<!DOCTYPE html>

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
5
Page
 6 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Example Explained

 The <!DOCTYPE html> declaration defines this document to be HTML5

 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

HTML Elements

An HTML element usually consists of a start tag and an end tag, with the content inserted in
between:
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>

<br>

HTML elements with no content are called empty elements. Empty elements do not have an
end tag, such as the <br> element (which indicates a line break).

Nested HTML Elements

HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
6

</body>
Page

</html>
 7 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Example Explained

 The <html> element defines the whole document.

 It has a start tag <html> and an end tag </html>.
 Inside the <html> element is the <body> element.
 The <body> element defines the document body.
 It has a start tag <body> and an end tag </body>.
 Inside the <body> element is two other HTML elements: <h1> and <p>.
 The <h1> element defines a heading.
 It has a start tag <h1> and an end tag </h1>.
 The element content is: My First Heading.
 The <p> element defines a paragraph.
 It has a start tag <p> and an end tag </p>.
 The element content is: My first paragraph.

Empty HTML Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break):

Example

<p>This is a <br> paragraph with a line break.</p>

Empty elements can be "closed" in the opening tag like this: <br />.HTML5 does not require
empty elements to be closed. But if you want stricter validation, or if you need to make your
document readable by XML parsers, you must close all HTML elements properly.

HTML Is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.
7
Page
 8 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

HTML Attributes

Attributes provide additional information about HTML elements. All HTML elements can
have attributes. Attributes provide additional information about an element. Attributes are
always specified in the start tag. Attributes usually come in name/value pairs
like: name="value”. Some attributes are defined globally and can be used on any element,
while others are defined for specific elements only.

Types:
 Standard Attributes
 Custom Attributes
Standard Attributes
The attributes listed below are supported by almost all the HTML 5 tags.

Attribute Options Function

Specifies a keyboard shortcut to access an

accesskey User Defined
element.

align right, left, center Horizontally aligns tags

background URL Places an background image behind an element

numeric, Places a background color behind an element

bgcolor hexidecimal, RGB
values

Classifies an element for use with Cascading

class User Defined
Style Sheets.

Specifies if the user can edit the element's content

contenteditable true, false
or not.

contextmenu Menu id Specifies the context menu for an element.

Custom attributes. Authors of a HTML document

data-XXXX User Defined can define their own attributes. Must start with
"data-".

Specifies whether or not a user is allowed to drag

draggable true,false, auto
an element.
8
Page
 9 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Specifies the height of tables, images, or table

height Numeric Value
cells.

Specifies whether element should be visible or

hidden hidden
not.

Names an element for use with Cascading Style

id User Defined
Sheets.

item List of elements Used to group elements.

itemprop List of items Used to group items.

Specifies if the element must have it's spelling or

spellcheck true, false
grammar checked.

style CSS Style sheet Specifies an inline style for an element.

subject User define id Specifies the element's corresponding item.

tabindex Tab number Specifies the tab order of an element.

title User Defined "Pop-up" title for your elements.

valign top, middle, bottom Vertically aligns tags within an HTML element.

Specifies the width of tables, images, or table

width Numeric Value
cells.

Custom Attributes
A new feature being introduced in HTML 5 is the addition of custom data attributes.

A custom data attribute starts with data- and would be named based on your requirement.
Here is a simple example −

<div class = "example" data-subject = "physics" data-level = "complex">

...

</div>
9
Page
 10 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Basic HTML Data types

In HTML, a data type is explained as the type of data that is used in the content of an element
or in the value of an attribute.

Classified based on:

 Basic HTML data types - HTML Basic Data Types

 Data types defined by Request for Comments (RFC) and Internet Assigned Numbers
Authority (IANA) documentation - RFC & IANA
 Data types defined by World Wide Web Consortium (W3C) Specifications - W3C

HTML Basic Data Types

There are the following four basic data types in HTML:

 character
 text
 name
 number

In HTML, the most commonly used data types are classified under the basic data types.
There are the following four basic data types in HTML:

 Character data type - Stores single alphanumeric text, which includes letters,
numbers, symbols, space, or punctuations.
 Text data type - Stores a string with maximum length of 2,147,483,647 printable
characters.
 Name date type - Refers to a name given to any particular datun (singular form of
data), function, or unit of a program in a programming language
 Number data type - Refers to the data type that can store a number in the range
of 1E-323 to 1.79E+308 (positive or negative) with an accuracy of about 15 digits.
Arithmetical operations can be performed with number data types.

Data Types defined by RFC and IANA Documentation

RFC is a memorandum, describes the methods, behaviours, or research on the working of
10

Internet. IANA is the entity that looks over the global IP address allocation, media types, and
Page

other Internet protocol related assignments.

 11 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

RFC is a memorandum that describes the methods, behaviours, or research on the working of
Internet. IANA is the entity that looks over the global IP address allocation, media types, and
other Internet protocol related assignments. According to the RFC and IANA documentation,
there are the following four basic data types:

 Uniform Resource Identifier (URI)

 Content type
 Language code
 Character set

Now let's discuss all the above four basic data types one by one:

HTML Uniform Resource Identifier (URI)

The URI refers to a set of characters used to identify or name a resource on the Internet. URIs
can also be defined as a simple and extensible method of identifying a resource on the Internet,

HTML Content Type

The content type (known as Media type or MIME) represents the type of the content used in
an embedded or linked resource. For instance, the content type can be plain text or a jpeg image.
It is not case sensitive. Its syntax is divided into two parts: top level and bottom level. The top
level is separated from the bottom level by a slash (/) symbol. Following are some of the
examples of the content type:

 Text/plain - Represents a plain text

 Image/jpeg - Represents a compressed image file
 Audio/basis - Represents an audio file
 Video/mpeg - Represents a transmitted compressed video file
 Application/octet-stream - Represents a binary file

HTML Language Code

The language code is used to represent the code of various literal languages, which are used
to script the HTML document. It is not case sensitive and is written by using the lang
11

attribute used in the HTML document.

Page
 12 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Example of Language Code

The implementation of the language code is shown in the following example:

<html lang="en">
...

</html>

HTML Language Code List

Following table lists some of the language code:

Language Language Code

English En

Hindi Hi

Greek El

German De

Irish Ga

HTML Character Set

The character set is a set of standard characters taken from the several languages and scripts
of the world, and are represented with the unique code points. These code points can be
defined as the unique names and integers that are assigned to the character sets for their
unique identification.

Following are some examples of the character set:

 dollar symbol
 yen symbol
 lower case letters
 upper case letters
12
Page
 13 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Data Types defined by W3C Specifications

W3C is an international community that develops standards to ensure long-term growth of

the Web. W3C is an international community that develops standards to ensure long-term
growth of the Web. W3C Specifies the following five additional data types for HTML:

 DateTime
 Red Green Blue (RGB) triplet
 Color names
 Link types
 Media type

HTML DateTime Format

DateTime uses ISO date format (ISO 8601), that is (YYYY-MM-DDThh:mm:ssTZD). The
components of the given format are defined in the following manner:

 YYYY - Represents a year in four digits, such as 1995 and 2009

 MM - Represents a two-digits numerical value of months (01 through 12)
 DD - Represents the date of the month (01 through 31)
 T - Acts as the separator between the date and time and it must be written in capital
letters
 hh - Represents the hour that ranges from 00 through 23
 mm - Represents the minutes that range from 00 through 59
 ss - Represents the second that ranges from 00 through 59
 TZD - Stands for Time Zone Designator (Z or +hh:mm or -hh:mm)

HTML RGB Triplet

RGB triplet represents three standard colors, which are Red, Green, and Blue. All the
possible colors can be formed with the combination of these three colors in different
intensities and proportions.All colors can be represented by a six digit hexadecimal number,
such as (xxyyzz), where:

 The first two consecutive digits (xx) of the hexadecimal number represent red. The
13

hexadecimal equivalence of Red color is #xx0000

Page
 14 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

 The second two consecutive digits (yy) represent green. The hexadecimal equivalence
of green is represent by #00yy00
 The last two digits (zz) represent blue. The hexadecimal equivalence is represented by
0000zz

HTML Color Names

In HTML, 16 colors can be called directly by their color names rather than their hexadecimal
values. This feature makes it easy for the users of HTML to call a color by its name, if they
are unware of its hexadecimal number and the concept of the RGB triplet.

Example: Black #000000

Silver #C0C0C0
Gray #808080
White #FFFFFF
Maroon #800000
Green #008000

HTML Link Types

Link types are used to provide a variety of information to search engine. You may use the
various recognized link types, with their conventional interpretations. These link types are not
case-sensitive, which implies that you can use both the lower case and the upper case
characters to represent a link type. The whitespace characters such as space, tab, carriage-
return, linefeed, formfeed, vertical-tab, and newline characters are not permitted within link
types.

There are the following link types available in HTML:

 Alternate - Refers to the substitute for the document in which the link occurs. When
used with the lang attribute, the alternate link type represents the translated version of
the current document. When used with the media attribute, it represents the version,
which is designed for a different media.
 Style Sheet - Represents the external style sheet. You can select a style from alternate
14

style sheets by using the style sheet and alternate link types together
Page
 15 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

 Start - Represents the first document among the collection of different documents.
The start link type provides information about the initial document to the search
engine.
 Next - Represents the next document in the linear set of documents
 Prev - Represents the previous document in the linear set of documents
 Contents - Represents the document having the table of content
 Index - Represents the document having the index
 Glossary - Represents the document having glossary
 Copyright - Represents the document having the copyright statement
 Chapter - Represents the chapter of a collection of documents
 Section - Represents the section of a collection of documents
 Subsection - Represents the subsection of a collection of documents
 Appendix - Represents the appendix of a collection of documents
 Help - Represents the document with the help feature
 Bookmark - Represents the bookmark

HTML Media Types

Media types enables us to specify how to present the HTML documents on different media,
such as paper, computer's screen, or an aural browser. HTML5 allows us to use
the CSS properties to display the text of an HTML page in different font types, colors, and
font sizes for different media.

There are the following available media types :

 screen - Represents a computer screen

 tty - Represents media using a fixed pitch character grid with limited display
capabilities
 tv - Represents a television
 projection - Represents a projector
 handheld - Represents hand-held devices, such as mouse, joy stick, and keyboard
 print - Represents the print preview mode
 aural - Represents the speech synthesizer

15

all - Represents the media type that is suitable for all the devices
Page
 16 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

HTML form elements

A form is an area of a Web page that allows the users to provide their information in a variety
of ways, such as by entering the text field or by selecting one or more available options from
the provided list. .

HTML enables you to add a form in a Web page by using the FORM tag. After adding the
form on the Web page, you can add various controls, such as buttons and text fields, on the
form by using a variety of tags. Some examples of these elements
are INPUT, BUTTON, TEXTAREA, and DATALIST.

The <form> Element

The HTML <form> element defines a form that is used to collect user input:

<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields, checkboxes, radio
buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

Here are some examples:

Type Description

<input type="text"> Defines a one-line text input field

<input type="radio"> Defines a radio button (for selecting one of many choices)
16

<input type="submit"> Defines a submit button (for submitting the form

Page
 17 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Text Input

<input type="text"> defines a one-line input field for text input:

Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

This is how it will look like in a browser:

First name:

Last name:

Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

This is how the HTML code above will be displayed in a browser:

Male
Female
Other

The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler.
17
Page

The form-handler is typically a server page with a script for processing input data.
 18 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

First name:
Mickey

Last name:
Mouse

Submit

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Normally, the form data is sent to a web page on the server when the user clicks on the
submit button.

In the example above, the form data is sent to a page on the server called "/action_page.php".
This page contains a server-side script that handles the form data:

<form action="/action_page.php">

If the action attribute is omitted, the action is set to the current page.

The Target Attribute

The target attribute specifies if the submitted result will open in a new browser tab, a frame,
or in the current window.The default value is "_self" which means the form will be submitted
in the current window.

To make the form result open in a new browser tab, use the value "_blank":

Example
18

<form action="/action_page.php" target="_blank">

Page

Other legal values are "_parent", "_top", or a name representing the name of an iframe.
 19 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when
submitting the form data:

Example
<form action="/action_page.php" method="get">

or:

Example
<form action="/action_page.php" method="post">
When to Use GET?

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in the page address
field:

/action_page.php?firstname=Mickey&lastname=Mouse

Notes on GET:

 Appends form-data into the URL in name/value pairs

 The length of a URL is limited (about 3000 characters)
 Never use GET to send sensitive data! (will be visible in the URL)
 Useful for form submissions where a user wants to bookmark the result
 GET is better for non-secure data, like query strings in Google

When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST
method does not display the submitted form data in the page address field.

Notes on POST:

 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked

The Name Attribute

Each input field must have a name attribute to be submitted.

19

If the name attribute is omitted, the data of that input field will not be sent at all.
Page

This example will only submit the "Last name" input field:
 20 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Example
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

This is how the HTML code above will be displayed in a browser:

Personal information: First name:

Mickey

Last name:
Mouse

Submit

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Example
<form>
Select a file: <input type="file" name="myFile">
20

</form>
Page
 21 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

HTML5 Form Elements

HTML5 added the following form elements:

 <datalist>
 <output>
 <keygen>
 <progress>
 <meter>

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.The
DATALIST tag is used to display the list of the predefined options that the user may want to
select as input. This tag enables the auto complete feature on the forms. This means that when
a user start typing in a text box, a list of predefined words is dropped down to choose.The
DATALIST tag is used with the INPUT tag, in which the list attribute is specified. The value
of the list attribute is similar to the id attribute of the DATALIST tag to link the INPUT tag
with the DATALIST tag.The OPTION tag used as the child tag of the DATALIST tag is used
to specify the list of the options that are to be displayed.Users will see a drop-down list of the
pre-defined options as they input data.The list attribute of the <input> element, must refer to
the id attribute of the <datalist> element.

Example
<INPUT type="text" list="name">
<DATALIST id="name">
<OPTION value="Richard">
<OPTION value="John">
<OPTION value="Tony">
</DATALIST>

OUTPUT
21
Page
 22 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed by a script).
The OUTPUT tag is used to display the result of the calculation, which can be written using
the JavaScript.The OUTPUT tag has three attributes i.e. form, name, and for. The form
attribute is used to specify the name of the form in which the output is displayed. The name
attribute is used to specify the name of the current tag and the for attribute is used to specify
the name of the control in which the result is displayed

Example

Perform a calculation and show the result in an <output> element:

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">

0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
OUTPUT

OUTPUT Tag Attributes

Following table lists the attributes of the OUTPUT tag.

Attribute Description

Associates the output with a specific control. The value of this attribute must match
For
the id attribute of its associated control.

form Refers to the id of a form

name Specifies the name of the OUTPUT tag

22
Page
 23 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

HTML5 < KEYGEN> Element

The KEYGEN tag is used to generate the key pair. When a form is submitted, a key pair,
which contains the private and public keys, is generated using the KEYGEN tag to secure the
content of the form.

The private key from the generated key pair is encrypted and stored in the key database on
local computer. The public key is encrypted and submitted to the server along with the form.

KEYGEN Tag Example

Following is the example of the KEYGEN tag, as shows in the following code snippet.

<KEYGEN name="key_name" challenge="10987654321">

KEYGEN Tag Attributes

Following table shows all the possible attributes used with the KEYGEN tag.

Attribute Description

autofocus Allows the control to get the focus as soon as the page loads

Specifies a string that is used for the verification at the time of submission of a
challenge
form

disabled Disables the input control

form Refers to the id of the FORM tag

keytype Specifies the type of the key to generate

name Provides a name to the input control

HTML5 < PROGRESS> Element

The PROGRESS tag is used to display the progress of a particular task that is being
performed. The PROGRES tag is used in conjunction with JavaScript to display the progress
or the process of a task.

The PROGRES tag has only two attributes i.e. value and max. The value attribute is used to
specify how much the task has been completed and the max attributes is used to specify the
23

total progress to be made.

Page
 24 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

PROGRESS Tag Example

Following is an example of using the PROGRESS tag.

<PROGRESS value="100" max="500"> </PROGRESS>

PROGRESS Tag Example

The following table shows the attributes used within the PROGRESS tag.

Attribute Description

value Specifies the value of the PROGRESS tag

max Specifies the maximum value of the PROGRESS tag

HTML5 < METER> Element

The METER tag is used to define the scalar measurement. This tag is mostly useful when you
need to display the disk usage and the relevance of a search result, or to show some other
measurement.

You cannot use the METER tag to display a single number as it is used to display a range.

METER Tag Example

Following are the two examples of the METER tag.

<METER min="50" max="165">72</METER>

<METER>200 from 500</METER>

Here, in the first example, we have used the min and max attributes of the METER tag to
specify the minimum and maximum values for the tag. This implies that you cannot define
the value of the METER tag less than 0 and more than 10. And in the second example, we
have displayed the tag without any attribute.
24
Page
 25 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

METER Tag Attributes

The following table describes attributes used within the METER tag.

Attribute Description

value Specifies the value of the METER tag

min Specifies the minimum value of the METER tag

max Specifies the maximum value of the METER tag

low Specifies a range which is considered as low value

high Specifies a range which is considered as high value

optimum Specifies a range which is considered as the optimum or the best value

form Refers to the id of the FORM tag

HTML –Frameset and Frames

HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages −

 Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.

 Sometimes your page will be displayed differently on different computers due to

different screen resolution.

 The browser's back button might not work as the user hopes.

 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag.
25

The <frameset> tag defines, how to divide the window into frames.
Page
 26 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

The rowsattribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames.

Each frame is indicated by <frame> tag and it defines which HTML document shall open into
the frame.
Example

A simple three-framed page:

<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
The <frameset> Tag Attributes
Following are important attributes of the <frameset> tag −

Sr.No Attribute & Description

cols
Specifies how many columns are contained in the frameset and the size of each
column. You can specify the width of each column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use cols =
"100, 500, 100".
A percentage of the browser window. For example, to create three vertical frames,
use cols = "10%, 80%, 10%".
1
Using a wildcard symbol. For example, to create three vertical frames, use cols =
"10%, *, 10%". In this case wildcard takes remainder of the window.
As relative widths of the browser window. For example, to create three vertical
frames, use cols = "3*, 2*, 1*". This is an alternative to percentages. You can use
relative widths of the browser window. Here the window is divided into sixths: the
first column takes up half of the window, the second takes one third, and the third
takes one sixth.

rows
This attribute works just like the cols attribute and takes the same values, but it is
2 used to specify the rows in the frameset. For example, to create two horizontal
frames, use rows = "10%, 90%". You can specify the height of each row in the
same way as explained above for columns.

border
3 This attribute specifies the width of the border of each frame in pixels. For example,
border = "5". A value of zero means no border.

frameborder
This attribute specifies whether a three-dimensional border should be displayed
4
26

between frames. This attribute takes value either 1 (yes) or 0 (no). For example
frameborder = "0" specifies no border.
Page
 27 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

framespacing
This attribute specifies the amount of space between frames in a frameset. This can
5
take any integer value. For example framespacing = "10" means there should be 10
pixels spacing between each frames.

The <frame> Tag Attributes

Following are the important attributes of <frame> tag −

Sr.No Attribute & Description

src
1 This attribute is used to give the file name that should be loaded in the frame. Its
value can be any URL. For example, src = "/html/top_frame.htm" will load an
HTML file available in html directory.

name
This attribute allows you to give a name to a frame. It is used to indicate which
2 frame a document should be loaded into. This is especially important when you
want to create links in one frame that load pages into an another frame, in which
case the second frame needs a name to identify itself as the target of the link.

frameborder
This attribute specifies whether or not the borders of that frame are shown; it
3
overrides the value given in the frameborder attribute on the <frameset> tag if one
is given, and this can take values either 1 (yes) or 0 (no).

marginwidth
This attribute allows you to specify the width of the space between the left and
4
right of the frame's borders and the frame's content. The value is given in pixels.
For example marginwidth = "10".

marginheight
This attribute allows you to specify the height of the space between the top and
5
bottom of the frame's borders and its contents. The value is given in pixels. For
example marginheight = "10".

noresize
By default, you can resize any frame by clicking and dragging on the borders of a
6
frame. The noresize attribute prevents a user from being able to resize the frame.
27

For example noresize = "noresize".

Page
 28 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

scrolling
This attribute controls the appearance of the scrollbars that appear on the frame.
7
This takes values either "yes", "no" or "auto". For example scrolling = "no" means
it should not have scroll bars.

longdesc
This attribute allows you to provide a link to another page containing a long
8
description of the contents of the frame. For example longdesc =
"framedescription.htm"

CSS "Cascading Style Sheet"

CSS is the acronym for "Cascading Style Sheet".

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you 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,variations in display for different
devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML
or XHTML.

Advantages of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple

HTML pages. You can define a style for each HTML element and apply it to as many
Web pages as you want.

 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that
tag. So less code means faster download times.

 Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
28
Page
 29 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by
curly braces.

Example

In this example all <p> elements will be center-aligned, with a red text color:

p{
color: red;
text-align: center;
}

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.

 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, border etc.

 Value − Values are assigned to properties. For example, colorproperty can have value
either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

selector { property: value }

29
Page
 30 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Example − You 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.You can define selectors in various simple ways based on your comfort. Let
me put these selectors one by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example to give a color to all
level 1 headings −

h1 {

color: #36CFFF;

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches
the name of any element type −

*{

color: #000000;

This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you 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;

The Class Selectors

You 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.
30
Page
 31 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

.black {

color: #000000;

This rule renders the content in black for every element with class 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 class attribute set to black.

You can apply more than one class selectors to given element. Consider the following example
−

<p class = "center bold">

This para will be styled by the classes center and bold.

</p>

The ID Selectors
You 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.

#black {
color: #000000;
}

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,
31
Page
 32 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

For example −

#black h2 {

color: #000000;

In this example all level 2 headings will be displayed in black color when those headings will
lie with in tags having id attribute set to black.

The Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is very
similar to descendants but have different functionality. 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> would not have any effect of
this rule.

The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule below
will match all the input elements having 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.

 p[lang] − Selects all paragraph elements with a lang attribute.

 p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of
exactly "fr".

 p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the
word "fr".

 p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values
32

that are exactly "en", or begin with "en-".

Page
 33 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Multiple Style Rules

You may need to define multiple style rules for a single element. You 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 semicolon (;). You can keep them in
a single line or multiple lines. For better readability, we keep them in separate lines.

For a while, don't bother about the properties mentioned in the above block. These properties
will be explained in the coming chapters and you can find complete detail about properties in
CSS References

Grouping Selectors
You can apply a style to many selectors if you 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.

You can combine the various id selectors together as shown below −

33
Page

#content, #footer, #supplement {

 34 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

position: absolute;

left: 510px;

width: 200px;

 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.

 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 cell phones or for
printing.

 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages
to make them compatible to future browsers.

Three Ways to Insert CSS (types of CSS)

There are three ways of inserting a style sheet:

 External style sheet

 Internal style sheet
 Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just
one file!Each page must include a reference to the external style sheet file inside the <link>
element.

Example

External styles are defined within the <link> element, inside the <head> section of an HTML
page:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
34

</head>
Page
 35 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension.

Here is how the "mystyle.css" file looks like:

"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Example

Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:

<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.

Example

Inline styles are defined within the "style" attribute of the relevant element:
35

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Page
 36 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets,
the value from the last read style sheet will be used.

Assume that an external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

Then, assume that an internal style sheet also has the following style for the <h1> element:

h1 {
color: orange;
}
Example

If the internal style is defined after the link to the external style sheet, the <h1> elements will
be "orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Example

However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
36
Page
 37 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

CSS - Lists
Lists are very helpful in conveying a set of either numbered or bullet points. This chapter
teaches you how to control list type, position, style, etc., using CSS.

We have the following five CSS properties, which can be used to control lists −

 The list-style-type allows you to control the shape or appearance of the marker.

 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.

 The list-style-image specifies an image for the marker rather than a bullet point or
number.

 The list-style serves as shorthand for the preceding properties.

 The marker-offset specifies the distance between a marker and the text in the list.

Now, we will see how to use these properties with examples.

The list-style-type Property

The list-style-type property allows you to control the shape or style of bullet point (also known
as a marker) in the case of unordered lists and the style of numbering characters in ordered
lists.

Here are the values which can be used for an unordered list −

Sr.No. Value & Description

1 none
NA

2 disc (default)
A filled-in circle

3 circle
An empty circle

4 square
A filled-in square

Here are the values, which can be used for an ordered list −

Value Description Example

37

decimal Number 1,2,3,4,5

Page
 38 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

decimal- 01, 02, 03, 04, 05

0 before the number
leading-zero

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV, V

alpha, beta,
lower-greek The marker is lower-greek
gamma

lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D, E

hebrew The marker is traditional Hebrew numbering

armenian The marker is traditional Armenian numbering

georgian The marker is traditional Georgian numbering

cjk-ideographic The marker is plain ideographic numbers

hiragana The marker is hiragana a, i, u, e, o, ka, ki

A, I, U, E, O, KA,
katakana The marker is katakana
KI

i, ro, ha, ni, ho, he,

hiragana-iroha The marker is hiragana-iroha
to

katakana-iroha I, RO, HA, NI,

The marker is katakana-iroha
HO, HE, TO

Here is an example −

<html>
<head>
</head>

<body>
38

<ul style = "list-style-type:circle;">

<li>Maths</li>
Page

<li>Social Science</li>
 39 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

<li>Physics</li>
</ul>

<ul style = "list-style-type:square;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style-type:decimal;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-alpha;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-roman;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

The list-style-position Property

The list-style-position property indicates whether the marker should appear inside or outside
of the box containing the bullet points. It can have one the two values −

Sr.No. Value & Description

1 none
NA

2 inside
If the text goes onto a second line, the text will wrap underneath the marker. It
will also appear indented to where the text would have started if the list had a
value of outside.

3 outside
39

If the text goes onto a second line, the text will be aligned with the start of the
first line (to the right of the bullet).
Page
 40 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Here is an example −

<html>
<head>
</head>

<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style = "list-style-type:square;list-style-position:inside;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style-type:decimal;list-stlye-position:outside;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-alpha;list-style-position:inside;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

The list-style-image Property

The list-style-image allows you to specify an image so that you can use your own bullet style.
The syntax is similar to the background-image property with the letters url starting the value
of the property followed by the URL in brackets. If it does not find the given image then
default bullets are used.
40
Page
 41 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Here is an example −

<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

The list-style Property

The list-style allows you to specify all the list properties into a single expression. These
properties can appear in any order.

Here is an example −

<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
41
Page
 42 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

The marker-offset Property

The marker-offset property allows you to specify the distance between the marker and the text
relating to that marker. Its value should be a length as shown in the following example −

Unfortunately, this property is not supported in IE 6 or Netscape 7.

Here is an example −

<html>
<head>
</head>

<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

CSS - Tables
You can set following properties of a table −
 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.
 The border-spacing specifies the width that should appear between table cells.
 The caption-side captions are presented in the <caption> element. By default, these
are rendered above the table in the document. You use the caption-side property to
control the placement of the table caption.
 The empty-cells specifies whether the border should be shown if a cell is empty.
 The table-layout allows browsers to speed up layout of a table by using the first width
42

properties it comes across for the rest of a column rather than having to load the whole
table before rendering it.
Page
 43 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Now, we will see how to use these properties with examples.

The border-collapse Property

This property can have two values collapse and separate. The following example uses both
the values −

<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}

td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>

<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />

<table class = "two">

<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
43
Page
 44 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

The border-spacing Property

The border-spacing property specifies the distance that separates adjacent cells'. borders. It
can take either one or two values; these should be units of length.

If you provide one value, it will applies to both vertical and horizontal borders. Or you can
specify two values, in which case, the first refers to the horizontal spacing and the second to
the vertical spacing −

<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>

<body>

<table class = "one" border = "1">

<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />

<table class = "two" border = "1">

<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>

</body>
</html>
44
Page
 45 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

The caption-side Property

The caption-side property allows you to specify where the content of a <caption> element
should be placed in relationship to the table. The table that follows lists the possible values.

This property can have one of the four values top, bottom, left or right. The following example
uses each value.

<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>

<body>

<table style = "width:400px; border:1px solid black;">

<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style = "width:400px; border:1px solid black;">

<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<table style = "width:400px; border:1px solid black;">

<caption class = "left">
This caption will appear at the left
45

</caption>
<tr><td > Cell A</td></tr>
Page

<tr><td > Cell B</td></tr>

 46 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

</table>
<br />

<table style = "width:400px; border:1px solid black;">

<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>

</body>
</html>

The empty-cells Property

The empty-cells property indicates whether a cell without any content should have a border
displayed.

This property can have one of the three values - show, hide or inherit.

Here is the empty-cells property used to hide borders of empty cells in the <table> element.

<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>

<body>
46
Page

<table class = "empty">

 47 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>

<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>

<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>

</body>
</html>

The table-layout Property

The table-layout property is supposed to help you control how a browser should render or lay
out a table.

This property can have one of the three values: fixed, auto or inherit.

The following example shows the difference between these properties.

<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
47

<body>
Page
 48 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

<table class = "auto" border = "1" width = "100%">

<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />

<table class = "fixed" border = "1" width = "100%">

<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>

</body>
</html>

CSS Navigation Bar

Navigation Bars

Having easy-to-use navigation is important for any web site. With CSS you can transform
boring HTML menus into good-looking navigation bars. A navigation bar is basically a list of
links, so using the <ul> and <li> elements makes perfect sense:

Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
48

}
Page
 49 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Example explained:

 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

The code in the example above is the standard code used in both vertical, and horizontal
navigation bars.

Vertical Navigation Bar

To build a vertical navigation bar, you can style the <a> elements inside the list, in addition
to the code above:

Example
li a {
display: block;
width: 60px;
}

Example explained:

 display: block; - Displaying the links as block elements makes the whole link area
clickable (not just the text), and it allows us to specify the width (and padding, margin,
height, etc. if you want)
 width: 60px; - Block elements take up the full width available by default. We want to
specify a 60 pixels width

You can also set the width of <ul>, and remove the width of <a>, as they will take up the full
width available when displayed as block elements. This will produce the same result as our
previous example:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
}
49
Page
 50 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and change the
background color of the links when the user moves the mouse over them:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */

li a:hover {
background-color: #555;
color: white;
}
Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Inline List Items

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in
addition to the "standard" code above:

Example
li {
display: inline;
}

Example explained:

 display: inline; - By default, <li> elements are block elements. Here, we remove the
line breaks before and after each list item, to display them on one line
50
Page
 51 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

Floating List Items

Another way of creating a horizontal navigation bar is to float the <li> elements, and specify
a layout for the navigation links:

Example
li {
float: left;
}

a{
display: block;
padding: 8px;
background-color: #dddddd;
}
CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element.

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

Example
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Transparent Hover Effect

The opacity property is often used together with the: hover selector to change the opacity on
mouse-over:

img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Example explained
51

The first CSS block is similar to the code in Example 1. In addition, we have added what should
happen when a user hovers over one of the images. In this case we want the image to NOT be
Page

transparent when the user hovers over it. The CSS for this is opacity:1;.
 52 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

When the mouse pointer moves away from the image, the image will be transparent again.

Transparent Box

When using the opacity property to add transparency to the background of an element, all of
its child elements inherit the same transparency. This can make the text inside a fully
transparent element hard to read:

Example
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above,
use RGBA color values. The following example sets the opacity for the background color and
not the text:

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is
a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

Example
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
52

div.transbox p {
Page

margin: 5%;
 53 Yuvakshetra Institute of Management Studies- PHP Notes (BSc.CS 2017-20 Batch)

font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>

*********
53
Page