HTML&PHP Practical File

Page |1
HTML
VISIT www.educationjockey.com for old papers, practical files samples.

This file is for reference purpose only.
Page |2
HYPERTEXT PREPROCESSOR (PHP)

Introducing HTML:
HTML stands for Hypertext Markup Language, and it is the most widely used language to write
Web Pages. As its name suggests, HTML is a markup language.
Hypertext refers to the way in which Web pages (HTML documents) are linked together.
When you click a link in a Web page, you are using hypertext.
Markup Language describes how HTML works. With a markup language, you simply
"mark up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Html File:
HTML is a format that tells a computer how to display a web page. The documents themselves
are plain text files with special "tags" or codes that a web browser uses to interpret and display
information on your computer screen.
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
Creating HTML Document:

Creating an HTML document is easy. To begin coding HTML you need only two things: a
simple-text editor and a web browser. Notepad is the most basic of simple-text editors. Here are
the simple steps to create a basic HTML document:
Open Notepad or another text editor.
At the top of the page type <html>.
On the next line, indent five spaces and now add the opening header tag: <head>.
On the next line, indent ten spaces and type <title></title>.
Go to the next line, indent five spaces from the margin and insert the closing header tag:
</head>.
Five spaces in from the margin on the next line, type<body>.

Page |3
Now drop down another line and type the closing tag right below its mate: </body>.
Finally, go to the next line and type </html>.
Inthe File menu, choose Save As.
In the Save as Type option box, choose All Files.
Name the file template.htm.
Click Save.
HTML Code for creating simple HTML page:

<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document description goes here.....</p>
</body>
</html>
Save the file as simple.html. Start your Internet browser. Select Open (or Open Page) in the
File menu of your browser. A dialog box will appear. Select Browse (or Choose File) and locate
the html file you just created - simple.html - select it and click Open. Now you should see an
address in the
Dialog box, for example C:\MyDocuments\simple.html. Click OK, and the browser will
display the page.
Page |4
Here,The DOCTYPE declaration defines the document type to be HTML

The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph.
Skeleton of HTML Document:

An HTML document starts and ends with <html> and >/html> tags. These tags tell the browser
that the entire document is composed in HTML. Inside these two tags, the document is split into
two sections:
The <head>...</head> elements, which contain information about the document such as title
of the document, author of the document etc. Information inside this tag does not display
outside.
The <body>...</body> elements, which contain the real content of the document that you see
on your screen.
HTML language is a markup language and we use many tags to markup text. In the above
example you have seen <html>, <body> etc. are called HTML tags or HTML elements.
Every tag consists of a tag name, sometimes followed by an optional list of tag attributes, all
placed between opening and closing brackets (< and >). The simplest tag is nothing more than a
name appropriately enclosed in brackets, such as <head> and <i>. More complicated tags
contain one or more attributes, which specify or modify the behavior of the tag.
According to the HTML standard, tag and attribute names are not case-sensitive. There's no
difference in effect between <head>, <Head>, <HEAD>, or even <HEAD>; they are all
equivalent. But with XHTML, case is important: all current standard tag and attribute names are
in lowercase.

Page |5
HTML Tags :
HTML tags are used to mark-up HTML elements

HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive; <b> means the same as <B>
HTML Versions:

Page |6
HTML Editors
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Notepad
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).

Page |7
HTML TAGS
Logical vs. Physical Tags :

In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to
the browser) the enclosed text's meaning. An example of a logical tag is the <strong></strong>
tag. By placing text in between these tags you are telling the browser that the text has some
greater importance. By default all browsers make the text appear bold when in between the
<strong> and </strong> tags.
Physical tags on the other hand provide specific instructions on how to display the text they
enclose. Examples of physical tags include:
<b>: Makes the text bold.
<big>: Makes the text usually one size bigger than what's around it.
<i>: Makes text italic.
Physical tags were invented to add style to HTML pages because style sheets were not around,
though the original intention of HTML was to not have physical tags. Rather than use physical
tags to style your HTML pages, you should use style sheets.

Page |8
HTML Basic Tags :

The basic structure for all HTML documents is simple and should include the following
minimum elements or tags:
<html>- The main container for HTML pages
<head>- The container for page header information
<title>- The title of the page
<body>- The main body of the page
Remember that before an opening <html> tag, an XHTML document can contain the optional
XML declaration, and it should always contain a DOCTYPE declaration indicating which
version of XHTML it uses.
The <html> Element:

The <html> element is the containing element for the whole HTML document. Each HTML
document should have one <html> and each document should end with a closing </html> tag.
Following two elements appear as direct children of an <html> element:
<head>
<body>
As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web
page.
The <head> Element:

The <head> element is just a container for all other header elements. It should be the first thing
to appear after the opening <html> tag.
Each <head> element should contain a <title> element indicating the title of the document,
although it may also contain any combination of the following elements, in any order:
The <base>tag is used to areate a "base" url for all links on the page. Check HTML Base tag.
The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3
files, QuickTime movies and other components of a page. Check HTML Object tag.
The <link> tag is used to link to an external file, such as a style sheet or JavaScript file.
Check HTML Link tag.
The <style> tag is used to include CSS rules inside the document. Check HTML Style tag.
The <script> tag is used to include JAVAScript or VBScript inside the document. Check
HTML Script tag.
Page |9
The <meta> tag includes information about the document such as keywords and a
description, which are particularly helpful for search applications.
Example:
Following is the example of head tag.
<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.tutorialspoint.com" />
<link rel="stylesheet" type="text/css" href="tp.css" />
<script type="text/javascript">
</script>
</head>
The <title> Element:

You should specify a title for every page that you write inside the <title> element. This element
is a child of the <head> element). It is used in several ways:
It displays at the very top of a browser window.
It is used as the default name for a bookmark in browsers such as IE and Netscape.
Its is used by search engines that use its content to help index pages.
Therefore it is important to use a title that really describes the content of your site. The <title>
element should contain only the text for the title and it may not contain any other elements.
Example:
Here is the example of using title tag.
<head>
<title>HTML Basic tags</title>
</head>
The <body> element appears after the <head> element and contains the part of the Web page
that you actually see in the main browser window, which is sometimes referred to as body
content.
A <body> element may contain anything from a couple of paragraphs under a heading to more
complicated layouts containing forms and tables.
Most of what you will be learning in this and the following five chapters will be written
between the opening <body> tag and closing </body> tag.
Example:
Here is the example of using
P a g e | 10
body tag. <body>

<p>This is a paragraph tag.</p>
</body>
HTML Meta Tags:

HTML lets you specify metadata - information about a document rather than document content -
in a variety of ways. The META element can be used to include name/value pairs describing
properties of the HTML document, such as author, Expiry Date, a list of key words, author etc.
The <meta> tag is an empty element and so does not have a closing tag, rather, <meta> tags
carry information within attributes, so you need a forward slash character at the end of the
element.
Metadata provided by using meta tag is a very important part of the web. It can assist search
engines in finding the best match when a user performs a search. Search engines will often look
at any metadata attached to a page - especially keywords - and rank it higher than another page
with less relevant metadata, or with no metadata at all.
Adding Meta Tags to Your Documents:

You can add metadata to your web pages by placing <meta> tags between the <head> and
</head> tags. The can include the following attributes:
Attribute Description
Name Name for the property. Can be anything.

Examples include, keywords, description,
author, revised, generator etc.
content Specifies the property's value.
Meta Tag Examples:

Let's see few important usages of Meta Tags.
Specifying Keywords:
P a g e | 11
We specify keywords which will be used by the search engine to search a web page. So
using following tag you can specify important keywords related to your page.
<head>
<meta name="keywords" content="HTML, meta tags, metadata"/>
</head>
Setting Author Name:

You can set an author name in a web page using Meta Tag. See an example below:
<head>
<meta name="author" content="Roma Gupta" />
</head>
Document Description:
This is again important information and many search engine use this information as well
while searching a web page. So you should give an appropriate description of the page.
<head>
<meta name="description" content="Learn about Meta Tags." />
</head>
Nested Tags
Sometimes the <body> tag also contains other tags, like the <b> tab. When you enclose an
element in with multiple tags, the last tag opened should be the first tag closed.
Example:
<p><b><em>This is the proper way to close nested tags. </em></b></p>
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML
elements on your page. The <tag> tells the browser to do something, while the attribute tells the
browser how to do it. For instance, if we add the bgcolor attribute, we can tell the browser that
the background color of your page should be blue, like this:
<body bgcolor="blue">.
This tag defines an HTML table: <table>. With an added border attribute, you can tell the
browser that the table should have no borders: <table border="0">. Attributes always come in

P a g e | 12
name/value pairs like this: name="value". Attributes are always added to the start tag of an
HTML element and the value is surrounded by quotes.
Basic HTML Tags for formatting:

The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Basic HTML Tags Description

<html> Defines an HTML
document
<body> Defines the
document's body
<h1> to <h6> Defines header 1
to header 6
<p> Defines a
paragraph
<br> Inserts a single
line break
<hr> Defines a
horizontal rule
 be displayed like this.</p> displayed like this.
Demo of HTML Tags:
Other HTML Tags

As mentioned before, there are logical styles that describe what the text should be and physical
styles which actually provide physical formatting. It is recommended to use the logical tags and
use style sheets to style the text in those tags.
Logical Tags Description

<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<cite> Defines a citation
P a g e | 16
<code> Defines computer code text

<blockquote> Defines a long quotation
<del> Defines text
<dfn> Defines a definition term
<em> Defines emphasized text
<ins> Defines inserted text
<kbd> Defines keyboard text
<pre> Defines preformatted text
<q> Defines a short quotation
<samp> Defines sample computer code
<strong> Defines strong text
<var> Defines a variable
Physical Tags Description

<b> Defines bold text
<big> Defines big text
<i> Defines italic text
<small> Defines small text
superscripted
<sup> Defines text
<sub> Defines subscripted text
<tt> Defines teletype text
<u> Deprecated. Use styles instead
Character tags like <strong> and <em> produce the same physical display as <b> and <i> but
are more uniformly supported across different browsers.
#HTML Attributes:
Attributes are another important part of HTML markup. An attribute is used to define the
characteristics of an element and is placed inside the element's opening tag. All attributes are
made up of two parts: a name and a value:
Thenameis the property you want to set. For example, the <font> element in the example
carries an attribute whose name is face, which you can use to indicate which typeface you want
the text to appear in.
Thevalueis what you want the value of the property to be. The first example was supposed to
use the Arial typeface, so the value of the face attribute is Arial.
P a g e | 17
The value of the attribute should be put in double quotation marks, and is separated from the
name by the equals sign. You can see that a color for the text has been specified as well as the
typeface in this <font> element: <font face="arial" color="#CC0000">
Core Attributes:
The four core attributes that can be used on the majority of HTML elements (although not all)
are:
id
title
class
style
The id Attribute:
The id attribute can be used to uniquely identify any element within a page ( or style sheet ).
There are two primary reasons that you might want to use an id attribute on an element:
If an element carries an id attribute as a unique identifier it is possible to identify just that
element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use
the id attribute to distinguish between elements that have the same name.
The id attribute could be used to distinguish between two paragraph elements, like so:
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Casecading Style Sheet</p>
Note that there are some special rules for the value of the id attribute, it must:
Begin with a letter (A.Z or a.z) and can then be followed by any number of letters, digits
(0.9), hyphens, underscores, colons, and periods.
Remain unique within that document; no two attributes may have the same value within that
HTML document.
The title attribute gives a suggested title for the element. They syntax for the title attribute is
similar as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip or while the element is loading.
For example: <h4 title="Hello HTML!">Titled Heading Tag Example</h4>
Above code will generate following result:

P a g e | 18
The class Attribute:

The class attribute is used to associate an element with a style sheet, and specifies the class of
element.
The value of the attribute may also be a space-separated list of class names. For example:
class="className1 className2 className3"
The style Attribute:

The style attribute allows you to specify CSS rules within the element. For example:
<p style="font-family:arial; color:#FF0000;">Some text...</p>
Internationalization Attributes:
There are three internationalization attributes, which are available to most (although not all)
XHTML elements.
dir
lang
xml:lang
The dir Attribute:

The dir attribute allows you to indicate to the browser the direction in which the text should
flow.The dir attribute can take one of two values, as you can see in the table that follows:
Value Meaning
ltr Left to right (the default value)
rtl Right to left (for languages such as Hebrew or

Arabic that are read right to left)
Example: <html dir=rtl>

<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
P a g e | 19
</html>
When dir attribute is used within the <html> tag, it determines how text will be presented within
the entire document. When used within another tag, it controls the text's direction for just the
content of that tag.
The lang Attribute:

The lang attribute allows you to indicate the main language used in a document, but this
attribute was kept in HTML only for backwards compatibility with earlier versions of HTML.
This attribute has been replaced by the xml:lang attribute in new XHTML documents.
When included within the <html> tag, the lang attribute specifies the language you've generally
used within the document. When used within other tags, the lang attribute specifies the language
you used within that tag's content. Ideally, the browser will use lang to better render the text for
the user.
Example: <html lang=en>
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
#HTML Images:
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided
as attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
OUTPUT:

P a g e | 20
HTML Paragraphs
The HTML <p> element defines a paragraph.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
PROGRAM:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
P a g e | 21
</html>
OUTPUT:
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML
code.
The browser will remove extra spaces and extra lines when the page is displayed.
Any number of spaces, and any number of new lines, count as only one space.
Example
<p>
This paragraph
P a g e | 22
contains a lot of lines

in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
PROGRAM:

<head>
</head>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
P a g e | 23
in the source code,

but the browser
ignores it.
</p>
</body>
</html>
OUTPUT:
The HTML <pre> Element

The HTML <pre> element defines preformatted text.

P a g e | 24
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</pre>
PROGRAM:

<head>
</head>
<body>
<pre>
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</pre>
</body>
</html>

P a g e | 25
OUTPUT:
HTML Styling
Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to lightgrey:
Example
<body style="background-color:lightgrey">
<p>This is a paragraph.</p>

P a g e | 26
</body>
PROGRAM:
<head>
</head>
</body>
</html>
OUTPUT:

P a g e | 27
HTML Fonts:
Font face and color depends entirely on the computer and browser that is being used to view
your page. But the <font> tag is used to add style, size, and color to the text on your site. You
can use a <basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To
change any of the font attributes at any time within your page, simply use the <font> tag. The
text that follows will remain changed until you close with the </font> tag. You can change any
or the entire font attributes at the one time, by including all the required changes within the one
<font> tag.
Font Size:
You can set the size of your font with size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.
Example:
<font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>

P a g e | 28
SPECIFY THE RELATIVE FONT SIZE. <font size="+n"> or <font size="-n">: You can
specify how many sizes larger or how many sizes smaller than the preset font size should be.
Example:
<font size="-1">Font size="-1"</font>
<font size="+1">Font size="+1"</font>
This would Display:
Font Face:
You can set any font you like using face attribute but be aware that if the user viewing the page
doesn't have the font installed, they will not be able to see it. Instead they will default to Times
New Roman of your font with size attribute. See below few examples on using different font
face
Example:
<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
This will produce following result:

Times New Roman
Verdana
Comic Sans MS
WildWest
Specify alternate font faces:
A visitor will only be able to see your font if they have that font installed on their computer. So,
it is possible to specify two or more font face alternatives by listing the font face names,
separated by a comma.
Example:
<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console>
When your page is loaded, their browser will display the first font face that it has available. If
none of your selections are installed....then it will display the default font face Times New
Roman.
Font Color:
You can set any font color you like using color attribute. You can specify the color that you
want by either the color name or hexadecimal code for that color.
P a g e | 29
Example:
<font color="#FF00FF">This text is hexcolor #FF00FF</font>
<font color="red">This text is red</font>
This would display:
HTML Text Formatting Elements

In the previous chapter, you learned about HTML styling, using the HTML style attribute.
HTML also defines special elements, for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
Bold text
Important text
Italic text
P a g e | 30
Emphasized text
Marked text
Small text
Deleted text
Inserted text
Subscripts
Superscripts
HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance.
Example
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>
The HTML <strong> element defines strong text, with added semantic "strong" importance.
Example
<p><strong>This text is strong</strong>.</p>
HTML Italic and Emphasized Formatting

The HTML <i> element defines italic text, without any extra importance.
Example
<p><i>This text is italic</i>.</p>
The HTML <em> element defines emphasized text, with added semantic importance.
Example
<p><em>This text is emphasized</em>.</p>

P a g e | 31
HTML Small Formatting

The HTML <small> element defines small text:
Example
<h2>HTML <small>Small</small> Formatting</h2>
HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML Deleted Formatting

The HTML <del> element defines deleted (removed) of text.
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted Formatting

The HTML <ins> element defines inserted (added) text.
Example
<p>My favorite <ins>color</ins> is red.</p>
HTML Subscript Formatting

The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML Superscript Formatting

P a g e | 32
The HTML <sup> element defines superscripted text.

Example
<p>This is <sup>superscripted</sup> text.</p>
PRACTISE ON HTML TAGS WITH OUTPUT

PROGRAM_1:
<head>
</head>
<body>

<p><b>This text is bold</b>.</p>
<p><strong>This text is strong</strong>.</p>
<p><i>This text is italic</i>.</p>
<p><em>This text is emphasized</em>.</p>
</body>
</html>

P a g e | 33
OUTPUT:
PROGRAM_2:

<head>
</head>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
<h2>HTML <mark>Marked</mark> Formatting</h2>
P a g e | 34
<p>My favorite color is <del>blue</del> red.</p>

<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
OUTPUT:
HTML LINKS
Links are found in nearly all web pages. Links allow users to click their way from page to
page.
HTML Links - Hyperlinks

P a g e | 35
HTML links are hyperlinks.

A hyperlink is a text or an image you can click on, and jump to another document.
HTML Links - Syntax

In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example:
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
When you move the mouse cursor over a link, two things will normally happen:
The mouse arrow will turn into a little hand

The color of the link element will change
By default, links will appear as this in all browsers:
An unvisited link is underlined and blue

A visited link is underlined and purple
An active link is underlined and red
HTML Links - Image as Link

It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
HTML Links - The id Attribute

The id attribute can be used to create bookmarks inside HTML documents.
Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
Add an id attribute to any <a> element:

P a g e | 36
<a id="tips">Useful Tips Section</a>

Then create a link to the <a> element (Useful Tips Section):
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the <a> element (Useful Tips Section) from another page:
<a href="http://www.travel_project/regions/.htm#area">Visit the Region of your choice</a>
Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).
Example:
<a href="html_images.asp">HTML Images</a>
PROGRAM OUTPUT FOR LINKS:

P a g e | 37

P a g e | 38

P a g e | 39
HTML IMAGES
HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image:
<img src="url" alt="some_text">
The alt Attribute

The alt attribute specifies an alternate text for the image, if it cannot be displayed.
The value of the alt attribute should describe the image in words:
Example

P a g e | 40
<img src="html5.gif" alt="The official HTML5 Icon">

The alt attribute is required. A web page will not validate correctly without it.
HTML Screen Readers

Screen readers are software programs that can read what is displayed on a screen.
Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or
braille output.
Screen readers are used by people who are blind, visually impaired, or learning disabled.
Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
Alternatively, you can use width and height attributes.
The values are specified in pixels (without px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Width and Height or Style?

Both the width, the height, and the style attributes, are valid in the latest HTML5 standard.
We suggest you use the style attribute. It prevents styles sheets from changing the default size of
images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
P a g e | 41
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common on the web, to store images in a sub-folder, and refer to the folder in the
image name:
Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
If a browser cannot find an image, it will display a broken link icon:

Example
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px">
Images on Another Server

Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="http://www.w3schools.com/images/w3schools_green.jpg">

P a g e | 42
Animated Images
The GIF standard allows animated images:
Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px">
Note that the syntax of inserting animated images is no different from non-animated images.
Using an Image as a Link

It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Image Maps
For an image, you can create an image map, with clickable areas:
Example
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px"
>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Image Floating
You can let an image float to the left or right of a paragraph:
Example
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">
P a g e | 43
A paragraph with an image. The image floats to the left of the text.
</p>
PRACTISE OF IMAGES WITH OUTPUT

PROGRAM_1:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="india.jpg" alt="HTML5 Icon" style="width:128px;height:128px">

<img src="t-india.jpg" alt="HTML5 Icon" style="width:128; height:128">
</body>
</html>
OUTPUT:

P a g e | 44

P a g e | 45
PROGRAM_2:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="image/india.jpg" alt="HTML5 Icon" style="width:400px;height:400px">
</body>
</html>

P a g e | 46
OUTPUT:
HTML Styling
Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to lightgrey:
Example
</body>
The HTML Style Attribute

The HTML style attribute has the following syntax:
style="property:value"

P a g e | 47
The property is a CSS property. The value is a CSS value.
HTML Text Color

The color property defines the text color to be used for an HTML element:
Example
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
HTML Fonts
The font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
HTML Text Size

The font-size property defines the text size to be used for an HTML element:
Example
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center">Centered Heading</h1>
P a g e | 48
PRACTISE ON COMMANDS WITH OUTPUT:

PROGRAM:

<head>
</head>
<body>
<h1 style="color:blue">This is a heading</h1>

<p style="color:red">This is a paragraph.</p>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
<h1 style="text-align:center">Centered Heading</h1>
</body>
</html>

P a g e | 49
OUTPUT:

P a g e | 50
HTML can have Unordered lists, Ordered lists, or Description lists:

Unordered List
The first item

The second item
The third item
The fourth item
Ordered List
1. The first item

2. The second item
3. The third item
4. The fourth item
Description List
The first item
Description of item
The second item
Description of item
Unordered HTML Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).
Unordered List:
<ul>
<li>Coffee</li>
<li>Tea</li>

P a g e | 51
<li>Milk</li>
</ul>
Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:
Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle:
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Square:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
P a g e | 52
<li>Milk</li>
</ul>
None:
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers.
Ordered List:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters

P a g e | 53
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Upper Case:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lower Case:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Roman Upper Case:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

P a g e | 54
Roman Lower Case:

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists

A description list, is a list of terms, with a description of each term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines the data (description).
Description List:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists

List can be nested (lists inside lists).
Nested Lists:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
PRACTISE ON LISTS WITH OUTPUT:

PROGRAM:
P a g e | 55

<head>
</head>
<body>
Circle:
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Square:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
None:
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
P a g e | 56
</body>
</html>
OUTPUT:

P a g e | 57
HTML Table Example
Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50
Defining HTML Tables

Example
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
P a g e | 58
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Example explained:
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
Example
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To add borders, use the CSS border property:

Example
table, th, td {
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.

P a g e | 59
An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, add CSS border-collapse:
Example
table, th, td {
border-collapse: collapse;
}
An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
table, th, td {
}
th, td {
padding: 15px;
}
HTML Table Headings

Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
Example
<tr>
<th>Firstname</th>
<th>Lastname</th>
P a g e | 60
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To left-align the table headings, use the CSS text-align property:

Example
th {
text-align: left;
}
An HTML Table with Border Spacing

Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
Table Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
Example
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
P a g e | 61
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:
Example
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
An HTML Table With a Caption

To add a caption to a table, use the <caption> tag:
Example
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
P a g e | 62
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Different Styles for Different Tables

Most of the examples above use a style attribute (width="100%") to define the width of each
table.
This makes it easy to define different widths for different tables.
The styles in the <head> section, however, define a style for all tables in a page.
To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a different style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
ONE E.G. OF OUTPUT:

P a g e | 63
HTML Forms
The <form> Element
HTML forms are used to collect user input.
The <form> element defines an HTML form:
Example
<form>
.
P a g e | 64
form elements
.
</form>
HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons,
and more.
The <input> Element

The <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute.
Here are the types used in this chapter:
Type Description
text Defines normal text input
radio Defines radio button input (for selecting one of many choices)
submit Defines a submit button (for submitting the form)
You will learn a lot more about input types later in this tutorial.
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>
P a g e | 65
Last name:<br>
<input type="text" name="lastname">
</form>
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="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
The Submit Button

<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
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>
The Action Attribute

The action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.

P a g e | 66
Normally, the form is submitted to a web page on a web server.

In the example above, a server-side script is specified to handle the submitted form:
If the action attribute is omitted, the action is set to the current page.
The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the forms:
<form action="action_page.php" method="GET">
or:
<form action="action_page.php" method="POST">
When to Use GET?

You can use GET (the default method):
If the form submission is passive (like a search engine query), and without sensitive
information.
When you use GET, the form data will be visible in the page address:
action_page.php?firstname=Mickey&lastname=Mouse
When to Use POST?

You should use POST:
If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page address.
The Name Attribute

To be submitted correctly, each input field must have a name attribute.
P a g e | 67
This example will only submit the "Last name" input field:
Example
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<br><br>
<input type="submit" value="Submit">
</form>
Grouping Form Data with <fieldset>

The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>
HTML Form Attributes

An HTML <form> element, with all possible attributes set, will look like this:
Example
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
P a g e | 68
.
form elements
.
</form>
Here is the list of <form> attributes:
Attribute Description
accept- Specifies the charset used in the submitted form (default: the page charset).
charset
action Specifies an address (url) where to submit the form (default: the submitting
page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default:
GET).
name Specifies a name used to identify the form (for DOM usage:
document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).

P a g e | 69
PRACTISE ON FORM WITH OUTPUT:

PROGRAM:
<form id="form1" name="form1" method="post" action="class.php">
<table width="669" border="1">
<tr>
<td colspan="2">UPDATE RECORD</td>
</tr>
<tr>
<td>name</td>
<td><input type="text" name="textfield" value="<?php echo $str[name];?>" /></td>
</tr>
<tr>
<td>class</td>
<td><input type="text" name="textfield2" value="<?php echo $str[sclass];?>"/></td>
</tr>
<tr>
<td>age</td>
<td><input type="text" name="textfield3" value="<?php echo $str[age];?>"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="update" id="button" value="Submit" />
<input type="hidden" name="hf" value="<?php echo $str[sno];?>"/>
</td>
P a g e | 70
</tr>
</table>
</form>
<form id="form1" name="form1" method="post" action="class.php">

<table width="669" border="1">
<tr>
<td colspan="2">ADD NEW RECORD</td>
</tr>
<tr>
<td>name</td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>class</td>
<td><input type="text" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td>age</td>
<td><input type="text" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
</form>
P a g e | 71
OUTPUT:

P a g e | 72
CSS AND CSS 3

P a g e | 73
CASCADING STYLE SHEET (CSS)

What is CSS?
CSS stands for Cascading Style Sheets

CSS defines how HTML elements are to be displayed
Styles were added to HTML 4.0 to solve a problem
CSS saves a lot of work
External Style Sheets are stored in CSS files
CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started
a nightmare for web developers. Development of large web sites, where fonts and color
information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could (and should!) be removed from the HTML document, and
stored in a separate CSS file.
CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.
With an external style sheet file, you can change the look of an entire Web site by changing just
one file!
CSS Syntax
A CSS rule set consists of a selector and a declaration block:

P a g e | 74
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 property name and a value, separated by a colon.
CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by
curly braces:
p {color:red;text-align:center;}
To make the CSS code more readable, you can put one declaration on each line.
In the following example all <p> elements will be center-aligned, with a red text color:
Example
p{
color: red;
text-align: center;
}
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a
later date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
Example
p{
color: red;
/* This is a single-line comment */
text-align: center;
P a g e | 75
/* This is
a multi-line
comment */
CSS Selectors
CSS selectors allow you to select and manipulate HTML elements.
CSS selectors are used to "find" (or select) HTML elements based on their id, class, type,
attribute, and more.
The element Selector

The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will be center-aligned,
with a red text color)
Example
p{
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
An id should be unique within a page, so the id selector is used if you want to select a single,
unique element.
To select an element with a specific id, write a hash character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":
Example

P a g e | 76
#para1 {
text-align: center;
color: red;
}
The class Selector

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period character, followed by the name of the
class:
In the example below, all HTML elements with class="center" will be center-aligned:
Example
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all <p> elements with class="center" will be center-aligned:
Example
p.center {
text-align: center;
color: red;
}
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
P a g e | 77
p{
text-align: center;
color: red;
}
you can group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
text-align: center;
color: red;
}
Three Ways to Insert 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!
P a g e | 78
Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
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. An example of a style sheet file
called "myStyle.css", is shown below:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Example:
CSS :
/* CSS Document */
#container {
margin:0px auto;
width:1000px;
border:solid red thin;
#header {
width:1000px;
border-bottom:solid black thin;
height:150px;
}
P a g e | 79
#nav {
width:1000px;
border:solid red thin;
height:50px;
#nav ul {
margin-left:100px;
#nav li {
padding-right:100px;
list-style-type:none;
display:inline;
#contents {
width:1000px;
border:solid blue thin;
height:400px;
#footer {
width:1000px;
border:solid black thin;
height:30px;

P a g e | 80
External CSS - The <link> Element:
The <link> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style rules
within this text file and then you can include this file in any HTML document using <link>
element.
Here is the generic syntax of including external CSS file:
<head>
<link type="text/css" href="..." media="..." />
</head>
Attributes:
Attributes associated with <style> elements are:
Attribute Value Description
Type Text/css Specifies the style sheet language as a content-type

(MIME type). This attribute is required.
Href URL Specifies the style sheet file having Style rules. This
attribute is a required.
Media Screen Specifies the device the document will be displayed on.
Default value is all. This is optional attribute.
Tv
Projection
Handheld
Print
All

P a g e | 81
Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the head section of an HTML page:
Example
<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.
An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any
CSS property. The example shows how to change the color and the left margin of a <h1>
element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Multiple Style Sheets

If some properties have been defined for the same selector in different style sheets, the value
will be inherited from the more specific style sheet.
For example, assume that an external style sheet has the following properties for the <h1>
element:
h1 {
color: navy;
P a g e | 82
margin-left: 20px;
}
then, assume that an internal style sheet also has the following property for the <h1> element:
h1 {
color: orange;
}
If the page with the internal style sheet also links to the external style sheet the properties for the
<h1> element will be:
color: orange;
margin-left: 20px;
The left margin is inherited from the external style sheet and the color is replaced by the internal
style sheet.
Multiple Styles Will Cascade into One

Styles can be specified:
in an external CSS file

inside the <head> section of an HTML page
inside an HTML element
Cascading order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet
by the following rules, where number three has the highest priority:
1. Browser default
2. External and internal style sheets (in the head section)
3. Inline style (inside an HTML element)
Background Color
The background-color property specifies the background color of an element.
The background color of a page is set like this:
Example
P a g e | 83
body {
background-color: #b0c4de;
}
Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
body {
background-image: url("paper.gif");
}
All CSS Background Properties
All CSS Text Properties
Property Description
background Sets all the background properties in one declaration
color Sets the color of text
background-attachment Sets whether a background image is fixed or scrolls with the
direction restthe
Specifies of text
the page
direction/writing direction
background-color
letter-spacing Setsorthe
Increases background
decreases colorbetween
the space of an element
characters in a text
background-image
line-height Sets theSets
linethe background image for an element
height
background-position
text-align Setsthe
Specifies thehorizontal
starting position of aofbackground
alignment text image
background-repeat Setsthe
text-decoration Specifies how a background
decoration addedimage
to textwill be repeated

P a g e | 84
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return whether
the text should be overridden to support multiple languages in the
same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text
Difference Between Serif and Sans-serif Fonts
CSS Font Families

In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")

P a g e | 85
Generic family Font family Description
Serif Times New Roman Serif fonts have small lines at the ends
Georgia on some characters
Sans-serif Arial "Sans" means without - these fonts do

Verdana not have the lines at the ends of
characters
Monospace Courier New All monospace characters have the

Lucida Console same width
All CSS Font Properties
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-

caps font
font-weight Specifies the weight of a font

P a g e | 86
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Example
a{
color: #FF0000;
}
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link

a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */

a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
When setting the style for several link states, there are some order rules:

P a g e | 87
a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover
Common Link Styles

In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example program:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective.</p>
P a g e | 88
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
</body>
</html>
OUTPUT:
CSS Table:
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
}
Notice that the table in the example above has double borders. This is because both the table and
the <th>/<td> elements have separate borders.
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or
separated:
Example
table {
}
P a g e | 89
table, th, td {
}
Table Width and Height

Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to
50px:
Example
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Text Alignment

The text-align property sets the horizontal alignment, like left, right, or center.
By default, the text in <th> elements are center-aligned and the text in <td> elements are left-
aligned.
The following example left-aligns the text in <th> elements:
Example
th {
text-align: left;
}
Vertical Text Alignment

The vertical-align property sets the vertical alignment, like top, bottom, or middle.

P a g e | 90
By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
Example
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
To control the space between the border and content in a table, use the padding property on <td>
and <th> elements:
Example
td {
padding: 15px;
}
Table Color
The example below specifies the color of the borders, and the text and background color of <th>
elements:
Example
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
The look of an HTML table can be greatly improved with CSS:
Company Contact Country

Alfreds Futterkiste Maria Anders Germany

P a g e | 91
Berglunds snabbkp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Kniglich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spcialits Marie Bertrand France
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark
Css 3
CSS3 Animations
CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!
CSS3
Animation
Browser Support for Animations

The numbers in the table specify the first browser version that fully supports the property.
P a g e | 92
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
Property
@keyframes 10.0 4.0 -webkit- 16.0 4.0 -webkit- 15.0 -

5.0 -moz- webkit-
12.1
12.0 -o-
animation 10.0 4.0 -webkit- 16.0 4.0 -webkit- 15.0 -

5.0 -moz- webkit-
12.1
12.0 -o-
What are CSS3 Animations?

An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS3 animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change
from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the "example" animation to the <div> element. The animation will
lasts for 4 seconds, and it will gradually change the background-color of the <div> element
from "red" to "yellow":
Example
/* The animation code */
@keyframes example {
from {background-color: red;}
P a g e | 93
to {background-color: yellow;}
}
/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Note: If the animation-duration property is not specified, the animation will have no effect,
because the default value is 0.
In the example above we have specified when the style will change by using the keywords
"from" and "to" (which represents 0% (start) and 100% (complete)).
It is also possible to use percent. By using percent, you can add as many style changes as you
like.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
}
P a g e | 94
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
}
/* Standard syntax */
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Program2:
<!DOCTYPE html>
<html>
<head>

P a g e | 95
<style>
div {
width: 100px;
height: 100px;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-iteration-count: 3;
/* Chrome, Safari, Opera */
@-webkit-keyframes example {

P a g e | 96
/* Standard syntax */
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>

P a g e | 97
Output:

P a g e | 98
PHP

P a g e | 99
PHP
INTRO:
PHP is a server scripting language, and a powerful tool for making dynamic and interactive
Web pages. PHP is an acronym for "PHP: Hypertext Preprocessor".
PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's

ASP.PHP files can contain text, HTML, CSS, JavaScript, and PHP code. Its codes are executed
on the server, and the result is returned to the browser as plain HTML. Its files have extension
".php".
FEATURES OF PHP:
1. PHP can generate dynamic page content
2. PHP can create, open, read, write, delete, and close files on the server
3. PHP can collect form data
4. PHP can send and receive cookies
5. PHP can add, delete, modify data in your database
6. PHP can be used to control user-access
7. PHP can encrypt data
ADVANTAGES OF PHP:
1. PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
2. PHP is compatible with almost all servers used today (Apache, IIS, etc.)
3. PHP supports a wide range of databases
4. PHP is free. Download it from the official PHP resource: www.php.net
5. PHP is easy to learn and runs efficiently on the server side.
PROCESS OF PHP:
The process of running a PHP script on a Web server looks like this:
1. A visitor requests a Web page by clicking a link, or typing the page s URL into the
browser s address bar. The visitor might also send data to the Web server at the same time,

P a g e | 100
either using a form embedded in a Web page, or via AJAX (Asynchronous JavaScript And
XML).
2. The Web server recognizes that the requested URL is a PHP script, and instructs the PHP
engine to process and run the script.
3. The script runs, and when it s finished it usually sends an HTML page to the Web browser,
which the visitor then sees on their screen.
What Do I Need?
To start using PHP, you can:
Find a web host with PHP and MySQL support

Install a web server on your own PC, and then install PHP and MySQL
Starting with PHP

Following explains basic PHP Syntax:
A PHP script can be placed anywhere in the document.
A PHP script starts with <?php and ends with ?>:
<?php
// PHP code goes here
?>
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

P a g e | 101
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
Comments in PHP
A comment in PHP code is a line that is not read/executed as part of the program. Its only
purpose is to be read by someone who is looking at the code.
Comments can be used to:
Let others understand what you are doing

P a g e | 102
Remind yourself of what you did - Most programmers have experienced coming back to
their own work a year or two later and having to re-figure out what they did. Comments
can remind you of what you were thinking when you wrote the code
PHP Case Sensitivity

In PHP, all keywords (e.g. if, else, while, echo, etc.), classes, functions, and user-defined
functions are NOT case-sensitive.However; all variable names are case-sensitive.
#PHP Variables
A variable can have a short name (like x and y) or a more descriptive name (age, carname,
total_volume).
Rules for PHP variables:
A variable starts with the $ sign, followed by the name of the variable
A variable name must start with a letter or the underscore character
A variable name cannot start with a number
A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9,
and _ )
Variable names are case-sensitive ($age and $AGE are two different variables)
PHP variable names are case-sensitive!
PHP Variables Scope

In PHP, variables can be declared anywhere in the script.
The scope of a variable is the part of the script where the variable can be referenced/used.
PHP has three different variable scopes:
local
global
static

P a g e | 103
Creating (Declaring) PHP Variables

In PHP, a variable starts with the $ sign, followed by the name of the variable:
Example
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>
After the execution of the statements above, the variable $txt will hold the value Hello world!,
the variable$x will hold the value 5, and the variable $y will hold the value 10.5.
Note: When you assign a text value to a variable, put quotes around the value.
Note: Unlike other programming languages, PHP has no command for declaring a variable. It is
created the moment you first assign a value to it.
Output:

P a g e | 104
#PHP 5 echo and print Statements
The PHP echo Statement:

The echo statement can be used with or without parentheses: echo or echo().
Display Text
The following example shows how to output text with the echo command (notice that the text
can contain HTML markup):
Example
<?php
echo "Hello world!<br>";
echo "I'm about to learn PHP!<br>";
?>

P a g e | 105
OUTPUT:
The PHP print Statement:

The print statement can be used with or without parentheses: print or print().
Display Text
The following example shows how to output text with the print command (notice that the text
can contain HTML markup):
Example
<?php
print "<h2>PHP is Fun!</h2>";
print "Hello world!<br>";
print "I'm about to learn PHP!";
?>

P a g e | 106
OUTPUT:
DIFFERENCE BETWEEN ECHO and PRINT STATEMENT:
ECHO STATEMENT PRINT STATEMENT
1. Echo has no return value 1. Print has a return value of 1 so

it can be used in expressions.
2. Echo can take multiple 2. Print can take one argument.
parameters (although such
usage is rare).
P a g e | 107
3. Echo is marginally faster than 3. Print is marginally slower

print. thanecho.
#PHP 5 Data Types

Variables can store data of different types, and different data types can do different things.
PHP supports the following data types:
String
Integer
Float (floating point numbers - also called double)
Boolean
Array
Object
NULL
Resource
PHP String
A string is a sequence of characters, like "Hello world!".
A string can be any text inside quotes. You can use single or double quotes:
Example
<?php
$x = "Hello world!";
$y = 'Hello world!';
echo $x;
echo "<br>";
echo $y;
?>
OUTPUT:
P a g e | 108
PHP Integer
An integer is a whole number (without decimals). It is a number between -2,147,483,648 and
+2,147,483,647.
Rules for integers:
An integer must have at least one digit (0-9)

An integer cannot contain comma or blanks
An integer must not have a decimal point
An integer can be either positive or negative
Integers can be specified in three formats: decimal (10-based), hexadecimal (16-based -
prefixed with 0x) or octal (8-based - prefixed with 0)
In the following example $x is an integer. The PHP var_dump() function returns the data type
and value:
Example
<?php
$x = 5985;
P a g e | 109
var_dump($x);
?>
OUTPUT:
PHP Float
A float (floating point number) is a number with a decimal point or a number in exponential
form.
In the following example $x is a float. The PHP var_dump() function returns the data type and
value:
Example
<?php
$x = 10.365;
var_dump($x);
?>

P a g e | 110
PHP Boolean
A Boolean represents two possible states: TRUE or FALSE.
$x = true;
$y = false;
Booleans are often used in conditional testing. You will learn more about conditional testing in
a later chapter of this tutorial.
PHP Array
An array stores multiple values in one single variable.
In the following example $cars is an array. The PHP var_dump() function returns the data type
and value:
Example
<?php
$cars = array("Volvo","BMW","Toyota");
var_dump($cars);
?>
PHP Object
An object is a data type which stores data and information on how to process that data.
In PHP, an object must be explicitly declared.
First we must declare a class of object. For this, we use the class keyword. A class is a structure
that can contain properties and methods:
Example
<?php
class Car {
function Car() {
$this->model = "VW"; } }
// create an object
P a g e | 111
$herbie = new Car();

// show object properties
echo $herbie->model;
?>
PHP NULL Value

Null is a special data type which can have only one value: NULL.
A variable of data type NULL is a variable that has no value assigned to it.
Tip: If a variable is created without a value, it is automatically assigned a value of NULL.
Variables can also be emptied by setting the value to NULL:
Example
<?php
$x = "Hello world!";
$x = null;
var_dump($x);
?>
OUTPUT:

P a g e | 112
#PHP Strings
A string is a sequence of characters, like "Hello world!".
Get The Length of a String

The PHP strlen() function returns the length of a string (number of characters).
The example below returns the length of the string "Hello world!":
Example
<?php
echo strlen("Hello world!"); // outputs 12
?>
Count The Number of Words in a String

The PHP str_word_count() function counts the number of words in a string:
Example
<?php
echo str_word_count("Hello world!"); // outputs 2
?>
Reverse a String
The PHP strrev() function reverses a string:
Example
<?php
echo strrev("Hello world!"); // outputs !dlrowolleH
?>
Search For a Specific Text Within a String

The PHP strpos() function searches for a specific text within a string.
P a g e | 113
If a match is found, the function returns the character position of the first match. If no match is
found, it will return FALSE.
The example below searches for the text "world" in the string "Hello world!":
Example
<?php
echo strpos("Hello world!", "world"); // outputs 6
?>
Replace Text Within a String

The PHP str_replace() function replaces some characters with some other characters in a string.
The example below replaces the text "world" with "Dolly":
Example
<?php
echo str_replace("world", "Dolly", "Hello world!"); // outputs Hello Dolly!
?>
OUTPUT:

P a g e | 114
#PHP Constants
A constant is an identifier (name) for a simple value. The value cannot be changed during the
script.
A valid constant name starts with a letter or underscore (no $ sign before the constant name).
Note: Unlike variables, constants are automatically global across the entire script.
Create a PHP Constant

To create a constant, use the define() function.
Syntax
define(name, value, case-insensitive)
Parameters:
name: Specifies the name of the constant

value: Specifies the value of the constant
case-insensitive: Specifies whether the constant name should be case-insensitive. Default
is false

P a g e | 115
The example below creates a constant with a case-sensitive name:

Example
<?php
define("GREETING", "Welcome to W3Schools.com!");
echo GREETING;
?>
Constants are Global

Constants are automatically global and can be used across the entire script.
The example below uses a constant inside a function, even if it is defined outside the function:
Example
<?php
define("GREETING", "Welcome to W3Schools.com!");
function myTest() {
echo GREETING;
}
myTest();
?>
OUTPUT:

P a g e | 116
#PHP 5 Operators
Operators are used to perform operations on variables and values.
PHP divides the operators in the following groups:
Arithmetic operators
Assignment operators
Comparison operators
P a g e | 117
Increment/Decrement operators
Logical operators
String operators
Array operators
PHP Arithmetic Operators

The PHP arithmetic operators are used with numeric values to perform common arithmetical
operations, such as addition, subtraction, multiplication etc.
PHP Assignment Operators

The PHP assignment operators are used with numeric values to write a value to a variable.
The basic assignment operator in PHP is "=". It means that the left operand gets set to the value
of the assignment expression on the right.

P a g e | 118
PHP Comparison Operators

The PHP comparison operators are used to compare two values (number or string):

P a g e | 119
PHP Increment / Decrement Operators

The PHP increment operators are used to increment a variable's value.
The PHP decrement operators are used to decrement a variable's value.
PHP Logical Operators

The PHP logical operators are used to combine conditional statements.
PHP String Operators

PHP has two operators that are specially designed for strings.

P a g e | 120
PHP Array Operators

The PHP array operators are used to compare arrays.
Practise on operators with output:

Program:
<?php
echo "Hello";
echo "<br>";
print ("hello again");echo "<br>";

P a g e | 121
$x=10;
echo "$x";echo "<br>";
$y=20;
echo "$y";echo "<br>";
$z=$x+$y;
echo "$z";echo "<br>";
$z=$x*$y;
echo "$z";echo "<br>";
/* relational operators */
echo '$x'; echo "<br>";
if($x==$y)
echo "yes";
else
echo "no"; echo "<br>";

P a g e | 122
if($x<$y)
echo "yes";
else
if($x===$y)
echo "yes";
else
/* logical operators */
if (($X!=$y) && ($z<$y))
echo "yes";
else
if (($X==$y) || ($z>$y))

P a g e | 123
echo "yes";
else
/* Assignment operators */
echo "*****************************";echo "<br>";
$x+=20;
$x-=4;
$x*=3;
$x/=2;
echo "$x";echo "<br>";
/* Concatenation */
$r= 100; $p=90;
echo "Result is" . $r;echo "<br>";
echo "Result is" . $r ."and percentage is". $p;echo "<br>";

P a g e | 124
/* Ternary Operator*/
$a=2; $b=3; $c=4;
$max= (($a>$b) ? (($a>$c)?$a:$c) : (($b>$c) ? $b:$c));
echo "$max"; echo "<br>";
/* Unary Operator*/
$d=10;
$f=$d++;
echo "$f";echo "<br>";
$f=++$d;
$f=$d++ + ++$d;
$f=++$d + $d++;
?>

P a g e | 125
OUTPUT

P a g e | 126
#PHP IF-ELSE LOOP

PHP Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In PHP we have the following conditional statements:
if statement - executes some code only if a specified condition is true

if...else statement - executes some code if a condition is true and another code if the
condition is false
if...elseif....else statement - specifies a new condition to test, if the first condition is false
switch statement - selects one of many blocks of code to be executed
PHP - The if Statement

The if statement is used to execute some code only if a specified condition is true.
Syntax
if (condition) {
code to be executed if condition is true;
}
The example below will output "Have a good day!" if the current time (HOUR) is less than 20:
Example
<?php
$t = date("H");
if ($t < "20") {

echo "Have a good day!";
}
?>
PHP - The if...else Statement

Use the if....else statement to execute some code if a condition is true and another code if the
condition is false.
P a g e | 127
Syntax
if (condition) {
} else {
code to be executed if condition is false;
}
The example below will output "Have a good day!" if the current time is less than 20, and
"Have a good night!" otherwise:
Example
<?php
$t = date("H");
if ($t < "20") {

} else {
echo "Have a good night!";
}
?>
PHP - The if...elseif....else Statement

Use the if....elseif...else statement to specify a new condition to test, if the first condition is
false.
Syntax
if (condition) {
} elseif (condition) {
} else {
code to be executed if condition is false;
}
The example below will output "Have a good morning!" if the current time is less than 10, and
"Have a good day!" if the current time is less than 20. Otherwise it will output "Have a good
night!":
Example

P a g e | 128
<?php
$t = date("H");
if ($t < "10") {

echo "Have a good morning!";
} elseif ($t < "20") {
} else {
echo "Have a good night!";
}
?>
PRACTISE ON LOOPS WITH OUTPUT:

PROGRAM:
<?php
for ($k=1; $k<=5 ; $k++)
for ($j=$k; $j<=5; $j++)
{ echo "$j"; }
echo "<br>";
echo "<br>";
for ($i=5; $i>=1; $i--)

P a g e | 129
for($j=$i; $j<=5;$j++)
{echo "$i";}
echo "<br>";
echo"<br>";
for ($i=1;$i<=5;$i++)
{ for ($j=1; $j<=$i;$j++)
{ echo "*"; }
echo "<br>";
?>
OUTPUT:

P a g e | 130
#The PHP switch Statement

Use the switch statement to select one of many blocks of code to be executed.
Syntax
switch (n) {
case label1:
code to be executed if n=label1;
break;
case label2:
break;
case label3:
P a g e | 131
break;
...
default:
code to be executed if n is different from all labels;
}
Example
<?php
$favcolor = "red";
switch ($favcolor) {
case "red":
echo "Your favoritecolor is red!";
break;
case "blue":
echo "Your favoritecolor is blue!";
break;
case "green":
echo "Your favoritecolor is green!";
break;
default:
echo "Your favoritecolor is neither red, blue, or green!";
}
?>
OUTPUT:

P a g e | 132
#PHP Loops
Often when you write code, you want the same block of code to run over and over again in a
row. Instead of adding several almost equal code-lines in a script, we can use loops to perform a
task like this.
In PHP, we have the following looping statements:
while - loops through a block of code as long as the specified condition is true
do...while - loops through a block of code once, and then repeats the loop as long as the
specified condition is true
for - loops through a block of code a specified number of times
foreach - loops through a block of code for each element in an array
The PHP while Loop

The while loop executes a block of code as long as the specified condition is true.

P a g e | 133
Syntax
while (condition is true) {
code to be executed;
}
The example below first sets a variable $x to 1 ($x = 1). Then, the while loop will continue to
run as long as $x is less than, or equal to 5 ($x <= 5). $x will increase by 1 each time the loop
runs ($x++):
Example
<?php
$x = 1;
while($x <= 5) {
echo "The number is: $x <br>";
$x++;
}
?>
The PHP do...while Loop

The do...while loop will always execute the block of code once, it will then check the condition,
and repeat the loop while the specified condition is true.
Syntax
do {
} while (condition is true);
The example below first sets a variable $x to 1 ($x = 1). Then, the do while loop will write some
output, and then increment the variable $x with 1. Then the condition is checked (is $x less than,
or equal to 5?), and the loop will continue to run as long as $x is less than, or equal to 5:
Example
<?php
$x = 1;
do {
P a g e | 134
$x++;
} while ($x <= 5);
?>
Notice that in a do while loop the condition is tested AFTER executing the statements within the
loop. This means that the do while loop would execute its statements at least once, even if the
condition is false the first time.
The example below sets the $x variable to 6, then it runs the loop, and then the condition is
checked:
Example
<?php
$x = 6;
do {
$x++;
} while ($x<=5);
?>
PRACTISE ON WHILE LOOP WITH OUTPUT:

PROGRAM:
<?php
/* while loop */
echo "<br>";
$i=1;
while ($i<=5)
{ echo $i;
P a g e | 135
$i++;
/* do while loop */
echo "<br>";
$i=1;
do
{ echo $i;
$i++;
} while ($i<=5);
echo "<br>";
?>
OUTPUT:

P a g e | 136
#The PHP for Loop

The for loop is used when you know in advance how many times the script should run.
Syntax
for (init counter; test counter; increment counter) {
}
Parameters:
init counter: Initialize the loop counter value

test counter: Evaluated for each loop iteration. If it evaluates to TRUE, the loop
continues. If it evaluates to FALSE, the loop ends.
increment counter: Increases the loop counter value
The example below displays the numbers from 0 to 10:

Example
<?php
for ($x = 0; $x <= 10; $x++) {

P a g e | 137
}
?>
The PHP foreach Loop

The foreach loop works only on arrays, and is used to loop through each key/value pair in an
array.
Syntax
foreach ($array as $value) {
}
For every loop iteration, the value of the current array element is assigned to $value and the
array pointer is moved by one, until it reaches the last array element.
The following example demonstrates a loop that will output the values of the given array
($colors):
Example
<?php
$colors = array("red", "green", "blue", "yellow");
foreach ($colors as $value) {

echo "$value <br>";
}
?>
PRACTISE OF FOR LLOOP WITH OUTPUT

PROGRAM:
<?php
/* for loop */

P a g e | 138
echo "<br>";
for ($i=1;$i<=10;$i++)
if ($i==5)
break;
echo $i."<br>";
echo "<br>";
for ($i=1;$i<=10;$i++)
if ($i==5)
continue;
echo $i."<br>";
?>
OUTPUT:

P a g e | 139
#PHP FUNCTIONS
PHP User Defined Functions
Besides the built-in PHP functions, we can create our own functions.
A function is a block of statements that can be used repeatedly in a program.
P a g e | 140
A function will not execute immediately when a page loads.

A function will be executed by a call to the function.
Create a User Defined Function in PHP

A user defined function declaration starts with the word "function":
Syntax
function functionName() {
}
Note: A function name can start with a letter or underscore (not a number).
Tip: Give the function a name that reflects what the function does!
Function names are NOT case-sensitive.
In the example below, we create a function named "writeMsg()". The opening curly brace ( { )
indicates the beginning of the function code and the closing curly brace ( } ) indicates the end of
the function. The function outputs "Hello world!". To call the function, just write its name:
Example
<?php
function writeMsg() {
echo "Hello world!";
}
writeMsg(); // call the function

?>
PHP Function Arguments

Information can be passed to functions through arguments. An argument is just like a variable.

P a g e | 141
Arguments are specified after the function name, inside the parentheses. You can add as many
arguments as you want, just seperate them with a comma.
The following example has a function with one argument ($fname). When the familyName()
function is called, we also pass along a name (e.g. Jani), and the name is used inside the
function, which outputs several different first names, but an equal last name:
Example
<?php
function familyName($fname) {
echo "$fnameRefsnes.<br>";
}
familyName("Jani");
familyName("Hege");
familyName("Stale");
familyName("Kai Jim");
familyName("Borge");
?>
PHP Default Argument Value

The following example shows how to use a default parameter. If we call the function
setHeight() without arguments it takes the default value as argument:
Example
<?php
function setHeight($minheight = 50) {
echo "The height is : $minheight<br>";
}
setHeight(350);
setHeight(); // will use the default value of 50
setHeight(135);
setHeight(80);
?>
PHP Functions - Returning values

P a g e | 142
To let a function return a value, use the return statement:

Example
<?php
function sum($x, $y) {
$z = $x + $y;
return $z;
}
echo "5 + 10 = " . sum(5, 10) . "<br>";

echo "7 + 13 = " . sum(7, 13) . "<br>";
echo "2 + 4 = " . sum(2, 4);
?>
PRACTISE OF FUNCTION WITH OUTPUT

PROGRAM:
<?php
function fun()
echo "This is my first function"; echo "<br>";
fun();
function fun1()
echo "Name"; echo "<br>";
for ($i=1;$i<=10;$i++)

P a g e | 143
echo "Cherry";
echo "<br>";
fun1();
function add($x,$y)
$c=$x+$y;
echo $c; echo "<br>";
//////////////////////////////////
function add1 ($x,$y)
$c=$x+$y;
return $c; echo "<br>";
$a= add1(15,10);
echo $a;
echo "<br>";

P a g e | 144
// Default functions:
function fun2 ($name,$class=BCA)
echo $name,$class;
fun2 ("Aman",MCA);
fun2 ("Sneha");
// Function to change the style $ size of the text
function fun3()
$hello="Hello";
$world="World";echo "<br>";
echo $hello;
echo $world;echo "<br>";
fun3 ();
echo $hello;
echo $world;
$z="Hello There";

P a g e | 145
function fun4()
global $t;
$t="world";
echo $z;
echo $t;
fun4();
echo $z;
echo $t;
?>
OUTPUT:

P a g e | 146
#PHP ARRAY
An array stores multiple values in one single variable:
Example
P a g e | 147
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
What is an Array?
An array is a special variable, which can hold more than one value at a time.
If you have a list of items (a list of car names, for example), storing the cars in single variables
could look like this:
$cars1 = "Volvo";
$cars2 = "BMW";
$cars3 = "Toyota";
However, what if you want to loop through the cars and find a specific one? And what if you
had not 3 cars, but 300?
The solution is to create an array!
An array can hold many values under a single name, and you can access the values by referring
to an index number.
Create an Array in PHP

In PHP, the array() function is used to create an array:
array();
In PHP, there are three types of arrays:
Indexed arrays - Arrays with a numeric index

Associative arrays - Arrays with named keys
Multidimensional arrays - Arrays containing one or more arrays
PHP Indexed Arrays

P a g e | 148
There are two ways to create indexed arrays:

The index can be assigned automatically (index always starts at 0), like this:
or the index can be assigned manually:
$cars[0] = "Volvo";
$cars[1] = "BMW";
$cars[2] = "Toyota";
The following example creates an indexed array named $cars, assigns three elements to it, and
then prints a text containing the array values:
Example
<?php
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
Get The Length of an Array - The count() Function

The count() function is used to return the length (the number of elements) of an array:
Example
<?php
echo count($cars);
?>
Loop Through an Indexed Array

To loop through and print all the values of an indexed array, you could use a for loop, like this:
Example
<?php
$arrlength = count($cars);
for($x = 0; $x < $arrlength; $x++) {

P a g e | 149
echo $cars[$x];
echo "<br>";
}
?>
PHP Associative Arrays

Associative arrays are arrays that use named keys that you assign to them.
There are two ways to create an associative array:
$age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
or:
$age['Peter'] = "35";
$age['Ben'] = "37";
$age['Joe'] = "43";
The named keys can then be used in a script:
Example
<?php
echo "Peter is " . $age['Peter'] . " years old.";
?>
Loop Through an Associative Array

To loop through and print all the values of an associative array, you could use a foreach loop,
like this:
Example
<?php
foreach($age as $x => $x_value) {

echo "Key=" . $x . ", Value=" . $x_value;
echo "<br>";
}
?>

P a g e | 150
PRACTISE OF ARRAYS WITH OUTPUT:

PROGRAM
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Arrays</title>
</head>
<body>
<?php
$x=array(10,20,30);
echo $x[0];
echo "<br>";
echo "<pre>";
print_r($x);
echo "</pre>";
echo "<br>";
$y= array(10=>100, 20=>200,30=>300);

P a g e | 151
$y[]=5; $y[7]=6; $y[]=8;
echo $y[20];
echo "<br>";
echo "<pre>";
print_r($y);
echo "</pre>";
echo "<br>";
$z=array (10=>100, 20=>array(5,6), 30=>array(7,8));

echo "<pre>";
print_r($z);
echo "</pre>";
echo "<br>";
$k=array (15=>5.29, "ABC"=>100, 'A'=>NULL, 5=>TRUE, 50=>array(10,20));

echo "<pre>";
print_r($k);
echo "</pre>";
echo "<br>";
$a=range(1,100);
print_r($a);

P a g e | 152
echo "<br>";
if(is_array($a))
{
echo "Yes";
}
else
{
echo "No";
}
echo "<br>";
$x1[0]="Mango";
$x1[1]="Guava";
$x1[2]="Apple";
print_r($x1);
echo "<br>";
$detail= array("Name"=>"Aman", "Age"=>23, "Marks"=>75.7);

print_r($detail);
echo "<br>";
$country=array("India"=> array("HP", "AP"), "Australia"=> array("Sydney","Melbourne"));
foreach($country as $k=>$v)

P a g e | 153
{
echo $k."__".$v;
echo "<br>";
foreach ($v as $k1=>$v1)
{
echo $k1."__".$v1;
echo "<br>";
}
}
echo "<br>";
$w=array(10=>100, 20=>200, 30=>300);
echo count($w);
echo "<br>";
if (in_array(600,$w))
{
echo "Yes";
}
else
{
echo "No";
}
echo "<br>";

P a g e | 154
if (isset ($w[20]))
{
echo "Yes";
}
else
{
echo "No";
}
?>
</body>
</html>
OUTPUT:

P a g e | 155

P a g e | 156
#PHP - Sort Functions For Arrays

PHP array sort functions are:
sort() - sort arrays in ascending order

rsort() - sort arrays in descending order
asort() - sort associative arrays in ascending order, according to the value
ksort() - sort associative arrays in ascending order, according to the key
arsort() - sort associative arrays in descending order, according to the value
krsort() - sort associative arrays in descending order, according to the key
Sort Array in Ascending Order - sort()

The following example sorts the elements of the $cars array in ascending alphabetical order:
Example
<?php
sort($cars);
?>
Sort Array in Descending Order - rsort()

The following example sorts the elements of the $cars array in descending alphabetical order:
Example
<?php
rsort($cars);
?>

P a g e | 157
#PHP FORM
PHP - A Simple HTML Form
The example below displays a simple HTML form with two input fields and a submit button:
Example
<html>
<body>
<form action="welcome.php" method="post">

Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
When the user fills out the form above and clicks the submit button, the form data is sent for
processing to a PHP file named "welcome.php". The form data is sent with the HTTP POST
method.
To display the submitted data you could simply echo all the variables. The "welcome.php" looks
like this:
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>

Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
The output could be something like this:
Welcome John
Your email address is john.doe@example.com
The same result could also be achieved using the HTTP GET method:

P a g e | 158
Example
<html>
<body>
<form action="welcome_get.php" method="get">

Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
and "welcome_get.php" looks like this:
<html>
<body>
Welcome <?php echo $_GET["name"]; ?><br>

Your email address is: <?php echo $_GET["email"]; ?>
</body>
</html>
The code above is quite simple. However, the most important thing is missing. You need to
validate form data to protect your script from malicious code.
GET vs. POST

Both GET and POST create an array (e.g. array( key => value, key2 => value2, key3 => value3,
...)). This array holds key/value pairs, where keys are the names of the form controls and values
are the input data from the user.

P a g e | 159
Both GET and POST are treated as $_GET and $_POST. These are superglobals, which means
that they are always accessible, regardless of scope - and you can access them from any
function, class or file without having to do anything special.
$_GET is an array of variables passed to the current script via the URL parameters.
$_POST is an array of variables passed to the current script via the HTTP POST method.
When to use GET?

Information sent from a form with the GET method is visible to everyone (all variable names
and values are displayed in the URL). GET also has limits on the amount of information to
send. The limitation is about 2000 characters. However, because the variables are displayed in
the URL, it is possible to bookmark the page. This can be useful in some cases.
GET may be used for sending non-sensitive data.
Note: GET should NEVER be used for sending passwords or other sensitive information!
When to use POST?

Information sent from a form with the POST method is invisible to others (all names/values are
embedded within the body of the HTTP request) and has no limits on the amount of information
to send.
Moreover POST supports advanced functionality such as support for multi-part binary input
while uploading files to server.
However, because the variables are not displayed in the URL, it is not possible to bookmark the
page.
PRACTISE OF FORM WITH OUTPUT:

OUTPUT:

P a g e | 160

P a g e | 161

P a g e | 162
DATABASE CONNECTIVITY
MySQL is a database system used on the web

MySQL is a database system that runs on a server
MySQL is ideal for both small and large applications
MySQL is very fast, reliable, and easy to use
MySQL uses standard SQL
MySQL compiles on a number of platforms
MySQL is free to download and use
MySQL is developed, distributed, and supported by Oracle Corporation
MySQL is named after co-founder Monty Widenius's daughter: My
The data in a MySQL database are stored in tables. A table is a collection of related data, and it
consists of columns and rows.
Databases are useful for storing information categorically. A company may have a database
with the following tables:
Employees
Products
Customers
Orders
If you need a short answer, it would be "Whatever you like".

Both MySQLi and PDO have their advantages:
PDO will work on 12 different database systems, where as MySQLi will only work with
MySQL databases.
So, if you have to switch your project to use another database, PDO makes the process easy.
You only have to change the connection string and a few queries. With MySQLi, you will need
to rewrite the entire code - queries included.
Both are object-oriented, but MySQLi also offers a procedural API.

P a g e | 163
Both support Prepared Statements. Prepared Statements protect from SQL injection, and are
very important for web application security.
MySQL Examples in Both MySQLi and PDO Syntax

In this, and in the following chapters we demonstrate three ways of working with PHP and
MySQL:
MySQLi (object-oriented)
MySQLi (procedural)
PDO
MySQLi Installation
For Linux and Windows: The MySQLi extension is automatically installed in most cases, when
php5 mysql package is installed.
For installation details, go to: http://php.net/manual/en/mysqli.installation.php
PDO Installation
For installation details, go to: http://php.net/manual/en/pdo.installation.php
Open a Connection to MySQL

Before we can access data in the MySQL database, we need to be able to connect to the server
Example:
<?php
mysql_connect ("localhost","root","root");
mysql_select_db("student");

P a g e | 164
$user= $_REQUEST[user];
$pass= $_REQUEST[pass];
session_start();
$str=mysql_query ("select * from admin_login where ad_name='$user' and ad_pass='$pass'");
if (mysql_num_rows($str))
$_SESSION[abc]=$user;
header ("location:main.php");
else
header ("location:login.php?msg=wrong password");
?>

P a g e | 165
JAVASCRIPT

P a g e | 166
JAVASCRIPT
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
JavaScript is the most popular programming language in the world.
1. JavaScript Can Change HTML Content
2. JavaScript Can Change HTML Attributes
3. JavaScript Can Change HTML Styles (CSS)
4. JavaScript Can Validate Data.
#An Example of Java Script:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100"

height="180">

P a g e | 167
<p>Click the light bulb to turn on/off the light.</p>
<script>
functionchangeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
OUTPUT:

P a g e | 168
External JavaScript Advantages

Placing JavaScripts in external files has some advantages:
It separates HTML and code

It makes HTML and JavaScript easier to read and maintain
P a g e | 169
Cached JavaScript files can speed up page loads
JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "asked" for.
For example, a function can be executed when an event occurs, like when the user clicks a
button.
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript in Body</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>

P a g e | 170
<script>
functionmyFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
OUTPUT:
When button is clicked or invoked then:

P a g e | 171
JavaScript Display Possibilities

JavaScript can "display" data in different ways:
Writing into an alert box, using window.alert().

Writing into the HTML output using document.write().
Writing into an HTML element, using innerHTML.
Writing into the browser console, using console.log().
Using window.alert()
You can use an alert box to display data:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
P a g e | 172
</body>
</html>
OUTPUT:
Using document.write()
For testing purposes, it is convenient to use document.write():
<!DOCTYPE html>
<html>
<body>

<script>
document.write(5 + 6);
</script>

P a g e | 173
</body>
</html>
OUTPUT:
Using document.write() after an HTML document is fully loaded,

will delete all existing HTML:
<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>
OUTPUT:
P a g e | 174
#HTML DOM
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
The HTML DOM Tree of Objects
With the object model, JavaScript gets all the power it needs to create dynamic HTML:

P a g e | 175
JavaScript can change all the HTML elements in the page

JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and style
of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types

XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It
defines:
The HTML elements as objects

The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements

P a g e | 176
The HTML DOM Document

In the HTML DOM object model, the document object represents your web page.
The document object is the owner of all other objects in your web page.
If you want to access objects in an HTML page, you always start with accessing the document
object.
Below are some examples of how you can use the document object to access and manipulate
HTML.
Finding HTML Elements

Method Description
document.getElementById() Find an element by element id
document.getElementsByTagName() Find elements by tag name
document.getElementsByClassName() Find elements by class name
Changing HTML Elements

Method Description
element.innerHTML= Change the inner HTML of an element
element.attribute= Change the attribute of an HTML element

P a g e | 177
element.setAttribute(attribute,value) Change the attribute of an HTML element
element.style.property= Change the style of an HTML element
Adding and Deleting Elements

Method Description
document.createElement() Create an HTML element
document.removeChild() Remove an HTML element
document.appendChild() Add an HTML element
document.replaceChild() Replace an HTML element
document.write(text) Write into the HTML output stream
Adding Events Handlers

Method Description
document.getElementById(id).onclick=function(){code} Adding event handler code to an onclic
Finding HTML Objects

The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and
properties. These are still valid in HTML5.
Later, in HTML DOM Level 3, more objects, collections, and properties were added.

P a g e | 178
document.anchors Returns all <a> elements that have a name attribute
document.applets Returns all <applet> elements (Deprecated in HTML5)
document.baseURI Returns the absolute base URI of the document
document.body Returns the <body> element
document.cookie Returns the document's cookie
document.doctype Returns the document's doctype
document.documentElement Returns the <html> element
document.documentMode Returns the mode used by the browser
document.documentURI Returns the URI of the document
document.domain Returns the domain name of the document server
document.domConfig Obsolete. Returns the DOM configuration
document.embeds Returns all <embed> elements
document.forms Returns all <form> elements
document.head Returns the <head> element
document.images Returns all <img> elements
document.implementation Returns the DOM implementation
document.inputEncoding Returns the document's encoding (character set)

P a g e | 179
document.lastModified Returns the date and time the document was updated
document.links Returns all <area> and <a> elements that have a href attribute
document.readyState Returns the (loading) status of the document
document.referrer Returns the URI of the referrer (the linking document)
document.scripts Returns all <script> elements
document.strictErrorChecking Returns if error checking is enforced
document.title Returns the <title> element
document.URL Returns the complete URL of the document
#Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax:
document.getElementById(id).attribute=new value
This example changes the value of the src attribute of an <img> element:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif" width="160" height="120">

P a g e | 180
<script>
document.getElementById("image").src = "landscape.jpg";
</script>
<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>
</body>
</html>
OUTPUT:

HTML&PHP Practical File

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML&PHP Practical File

Transféré par

Droits d'auteur :

Formats disponibles

Page |1

VISIT www.educationjockey.com for old papers, practical files samples.

HYPERTEXT PREPROCESSOR (PHP)

Creating HTML Document:

VISIT www.educationjockey.com for old papers, practical files samples.

HTML Code for creating simple HTML page:

<title>This is document title</title>

<p>Document description goes here.....</p>

Here,The DOCTYPE declaration defines the document type to be HTML

Skeleton of HTML Document:

VISIT www.educationjockey.com for old papers, practical files samples.

HTML tags are used to mark-up HTML elements

VISIT www.educationjockey.com for old papers, practical files samples.

HTML can be edited by using a professional HTML editor like:

VISIT www.educationjockey.com for old papers, practical files samples.

Logical vs. Physical Tags :

VISIT www.educationjockey.com for old papers, practical files samples.

HTML Basic Tags :

The <html> Element:

The <head> Element:

The <title> Element:

body tag. <body>

HTML Meta Tags:

Adding Meta Tags to Your Documents:

Name Name for the property. Can be anything.

content Specifies the property's value.

Meta Tag Examples:

Setting Author Name:

<p><b><em>This is the proper way to close nested tags. </em></b></p>

VISIT www.educationjockey.com for old papers, practical files samples.

Basic HTML Tags for formatting:

Basic HTML Tags Description

Create Headings - The <hn> Elements:

VISIT www.educationjockey.com for old papers, practical files samples.

VISIT www.educationjockey.com for old papers, practical files samples.

<h5 align="left">I can align headings </h5>

Create Paragraph - The <p> Element:

Create Line Breaks - The <br /> Element:

The <br> tag has no closing tag.

VISIT www.educationjockey.com for old papers, practical files samples.

Demo of HTML Tags:

Other HTML Tags

Logical Tags Description

<code> Defines computer code text

Physical Tags Description

Above code will generate following result:

The class Attribute:

The style Attribute:

The dir Attribute:

rtl Right to left (for languages such as Hebrew or

Example: <html dir=rtl>

The lang Attribute:

VISIT www.educationjockey.com for old papers, practical files samples.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

contains a lot of lines

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

in the source code,

The HTML <pre> Element

VISIT www.educationjockey.com for old papers, practical files samples.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"