C.

S-Series
Covers
Complete HTML4.0,
HTML5, CSS3,
Guide of Java Script,
PHP, SQL,
Modern MySQL &
CMS System.

Author:

[Link]
 2
C.S-Series Modern Web Programming

Web
Programming
 Design Standards-Based Web Pages
 Learn Modern Web Programming With Best

HTML4.0, HTML5, CSS3,

Java Script, PHP, SQL,
MySQL & CMS System.
First Edition

Practice
 Deliver optimum client-side experience

Acknowledgments Shahid Laashary

0333667718
[Link] 8
shahidlaashary@[Link]
 3
C.S-Series Modern Web Programming
The first edition of this book might as well be the first edition of a brand-new
book. The Complete Guide of Modern Web Programming specification marks
a return to past ideas and an explosion of future ideas. It took a great deal of
work to put this new edition together. Given the amount of effort required, I
want to make sure that all those that helped are given their due.

First, I want to acknowledge the numerous fixes and improvements that

came from the feedback from both my students’ friends and readers around
the world. I write these books for you, and I am glad you are putting this
information to good use.

I would also like to show my appreciation to the many staff members at

N.C.B.A & E Campus Dera Ghazi Khan who helped on this book project in
some direct or indirect way.

Joe Lima listened to some of my verbal nonsense and helped guide me to

some deeper insights than I could have ever arrived at on my own.

My technical editor, James Pence, probably wondered when this project was
going to finish, and somehow he finished a nontechnical book of his own
during the project.

Finally, to my friends and family who tried to give me space to write this
thing, you deserve the biggest thanks. My Son Sadam Shahid and my wife
Ujala Shaheen, had to put up with a grouchy dad and far too many absent
weekends, so we now return you to our regularly scheduled weekends!
Cecilia, you provided a lot of help as well that made things a bit easier on all
of us, so thank you for that. I know you, more than anyone, appreciate the
importance of this project, considering the role HTML has played in our lives.
About the Technical Editor M. Kashif Lashari a full-time student.

As always, my greatest thanks go to Louise for knowing when to make me stop working. Our
daughter Holly was born during the writing of the first edition of this book, and our son Jake was
born this time round. The three of you make up my world.

Thanks to all at Sams who worked so hard to knock my code, prose, and time management into
shape. Particular thanks to Shelley Johnston, George Nedeff, and Steph Fox. Thanks and
apologies must also go to Megan Wade, who imposed order and coherence upon my writing. It
could not have been fun.

Writing often takes me away from other duties. I am fortunate in having such supportive friends
and colleagues at Corrosive. Max Guglielmino and Tolan Blundell weathered my prolonged
absence from the front line and filled the breach magnificently.

[Link]
 4
C.S-Series Modern Web Programming

Shahid
Laashary

Tell Us What You Think!

As the reader of this book, you are our most important critic and commentator. We value your
opinion and want to know what we're doing right, what we could do better, what areas you'd like
to see us publish in, and any other words of wisdom you're willing to pass our way.

You can email or write me directly to let me know what you did or didn't like about this book—
as well as what we can do to make our books stronger.

Please note that I cannot help you with technical problems related to the topic of this book, and
that due to the high volume of mail I receive, I might not be able to reply to every message.

When you write, please be sure to include this book's title and author as well as your name and
phone or fax number. I will carefully review your comments and share them with the author and
editors who worked on the book.

Email: webdev@[Link]
Mail: Mark Taber
Associate Publisher
Sams Publishing
800 East 96th Street
Indianapolis, IN 46240 USA

About the Author:

Shahid Laashary (shahidlaashary@[Link]) is
a Electrical Sub Engineer, student of B.S
Computer Science, Writer, Video editor, Web
Developer, Books Composer, Performance Chalk
Artist and a long-time industry veteran. Shahid
Laashary is heavily involved in the academic
community. Mr. Shahid Laashary is well
published, and his work has appeared in
numerous trade publications. He continues to publish regularly in Network
World. He also has published numerous books on Web technology and
design, including Business Communication, Ajax: The Complete Reference,
JavaScript: The Complete Reference, Saraiki Poetry and many others. His

[Link]
 5
C.S-Series Modern Web Programming
books have been translating into Urdu language and are used around the
world both in industry and college settings. You can learn more about our
books and other creative projects at our Web site: [Link].

Copyright
Copyright © 2014 by C.S. Series. All rights reserved. Except as permitted
under the United States Copyright Act of 1976, no part of this publication
may be reproduced or distributed in any form or by any means, or stored in a
database or retrieval system, without the prior written permission of the
author or publisher. The material in this eBook also appears in the print
version of this title (Modern Web Programming)..

C.S-Series eBooks are available at special quantity discounts to use as

premiums and sales promotions, or for use in corporate training programs.
To contact a representative please e-mail us at shahidlaashary@[Link].

Information has been obtained by C.S-Series from sources believed to be

reliable. However, because of the possibility of human or mechanical error by
our sources, C.S-Series, or others, does not guarantee the accuracy,
adequacy, or completeness of any information and is not responsible for any
errors or omissions or the results obtained from the use of such information.

TERMS OF USE:
This is a copyrighted work and The C.S-Series and its licensors reserve all
rights in and to the work. Use of this work is subject to these terms. Except
as permitted under the Copyright Act of 1976 and the right to store and
retrieve one copy of the work, you may not decompile, disassemble, reverse
engineer, reproduce, modify, create derivative works based upon, transmit,
distribute, disseminate, sell, publish or sublicense the work or any part of it
without C.S-Series’s prior consent. You may use the work for your own
noncommercial and personal use; any other use of the work is strictly
prohibited. Your right to use the work may be terminated if you fail to comply
with these terms.

C.S-Series and its licensors do not warrant or guarantee that the functions
contained in the work will meet your requirements or that its operation will

[Link]
 6
C.S-Series Modern Web Programming
be uninterrupted or error free. Neither C.S-Series nor its licensors shall be
liable to you or anyone else for any inaccuracy, error or omission, regardless
of cause, in the work or for any damages resulting there from. C.S-Series has
no responsibility for the content of any information accessed through the
work. Under no circumstances shall C.S-Series and/or its licensors be liable
for any indirect, incidental, special, punitive, consequential or similar
damages that result from the use of or inability to use the work, even if any
of them has been advised of the possibility of such damages. This limitation
of liability shall apply to any claim or cause whatsoever whether such claim
or cause arises in contract, tort or otherwise.

How This Book Is Organized

This book is divided into Eight parts:

 Part I" Getting Started," is an introduction to PHP.

 Part II" The Language," covers the basic features of the language. Pay particular attention
to this section if you are new to programming.
 Part III" Working with PHP," covers PHP in more detail, looking at the functions and
techniques you will need to become a proficient PHP programmer.
 Part IV" Extending PHP," examines library code, both code that you can create yourself
and PEAR, a repository of library code you can include in your own projects.
 Part V”
 Part VI”
 Part VII”
 Part VIII”

Part I contains Hours 1–3 and handles the information you will need to get your first script up
and running:

 Hour 1, "PHP: From Home Page to Web Enterprise," describes the history and
capabilities of PHP and looks at some of the compelling reasons for deciding to learn this
scripting language.
 Hour 2, "Installing PHP," explains how to install PHP on a Unix system and discusses
some of the configuration options you might want to choose when compiling PHP. In this
hour, we also examine ways of configuring PHP after it is installed.
 Hour 3, "A First Script," covers the different ways in which you can embed a PHP script
in a document and create a script that writes text to the user's browser.

Part II comprises Hours 4–9. In this part, you will learn the basic components of the PHP
language:

[Link]
 7
C.S-Series Modern Web Programming
 Hour 4, "The Building Blocks," covers the basics of PHP. You will learn about variables,
data types, operators, and expressions.
 Hour 5, "Going with the Flow," covers the syntax for controlling program flow in your
scripts. In addition to if and switch constructs, you will learn about loops using for and
while statements.
 Hour 6, "Functions," explores the use of functions to organize your code.
 Hour 7, "Arrays," discusses the array data type that can be used to hold list information.
We will also look at some of the functions PHP provides to manipulate arrays.
 Hour 8, "Working with Strings," covers the functions you can use to manipulate strings.
 Hour 9, "Objects," introduces PHP's support for classes and objects. Throughout the
course of the hour, we will develop a working example.

Part III consists of Hours 10–22. In this part, you will come to grips with the features and
techniques of the language:

 Hour 10, "Working with Forms," introduces the dimension of user input through the
mechanism of the HTML form. You will learn how to gather data submitted via a form.
 Hour 11, "Working with Files," shows you how to work with files and directories on the
local machine.
 Hour 12, "Working with the DBA Functions," demonstrates PHP's support for DBM-
style database systems, versions of which are available on most systems.
 Hour 13, "Database Integration—SQL," provides a brief introduction to SQL syntax and
introduces functions and classes for working with the MySQL database, the SQLite
library, and the PEAR::DB package.
 Hour 14, "Beyond the Box," covers some of the details of HTTP requests and looks at
PHP network functions.
 Hour 15, "Images On-the-Fly," explores PHP's image functions. With these, you can
create PNG files dynamically.
 Hour 16, "Working with Dates and Times," covers the functions and techniques you can
use for date arithmetic. We create a calendar example.
 Hour 17, "Advanced Objects," examines PHP's new extended support for objects and
object-oriented techniques.
 Hour 18, "Working with Regular Expressions," introduces regular expression functions.
You can use these to find and replace complex patterns in strings.
 Hour 19, "Saving State with Cookies and Query Strings," shows you some techniques for
passing information across scripts and requests.
 Hour 20, "Saving State with Session Functions," extends the techniques explored in Hour
19, using PHP's built-in session functions.
 Hour 21, "Working with the Server Environment," shows you how to call external
programs from your scripts and incorporate their output into your own.
 Hour 22, "XML," looks at PHP's support for the Extensible Markup Language (XML).
We examine the XML Parser functions as well as more advanced topics such as DOM
and XSLT.

Part IV consists of Hours 23 and Hours 24. In these, we move beyond the core language to
examine the ways in which libraries can be used to extend PHP's functionality:

[Link]
 8
C.S-Series Modern Web Programming
 Hour 23, "PEAR: Reusable Components to Extend the Power of PHP," introduces the
PHP Extension and Application Repository. You learn how to install packages and work
with some examples.
 Hour 24, "Towards a Framework for Larger Projects," builds up a code library of your
own. We explore some techniques that might be used in deploying a Front Controller
enterprise pattern. This example utilizes some of PHP's most advanced object-oriented
features.

Finally, we include a glossary that defines some of the more technical terms you might encounter
as you work through the book.

_________
Contents at a
Glance
Part 1: Introduction to Internet
1. Internet and World Wide Web -----------------------------------------

Part 2: Core Markup

1. Introduction to HTML4.0 -----------------------------------------------
2. Introduction to HTML5.0 -----------------------------------------------

Part 3: Core style

1. Cascading Style Sheets --------------------------------------------------

Part 4: JavaScript

[Link]
 9
C.S-Series Modern Web Programming
1. Introduction to Java Script -----------------------------------------------

Part 5: PHP
1. Introduction to PHP --------------------------------------------------------

Part 6: SQL
1. Introduction to SQL -------------------------------------------------------

Part 7:MySQL
1. Introduction to My SQL -------------------------------------------------

Part 8: CMS System

1. Introduction to CMS System --------------------------------------------

[Link]
 10
C.S-Series Modern Web Programming

Contents
Cover Page --------------------------------------------------------------------------------------------- 1

Acknowledgments ------------------------------------------------------------------------------------ 2

About the Author ------------------------------------------------------------------------------------- 3

Copy Right --------------------------------------------------------------------------------------------- 3

Terms of Use ------------------------------------------------------------------------------------------ 4

Contents at a Glance --------------------------------------------------------------------------------- 5

Part 1: Introduction to Internet

Internet and World Wide Web
--------------------------------------------------
1.1 Internet ---------------------------------------------------------------------------------------

1.1.1 Uses of internet ----------------------------------------------------------------------

1.1.2 Working of internet -----------------------------------------------------------------

1.1.3 Impacts of Internet on Society -----------------------------------------------------

1.2 History of Internet ------------------------------------------------------------------------------

1.3 Connection to the Internet ---------------------------------------------------------------------

1.4 Addressing Scheme ----------------------------------------------------------------------------

[Link]
 11
C.S-Series Modern Web Programming
1.4.1 IP Addressing ---------------------------------------------------------------------------------

1.4.2 DNS Addressing -----------------------------------------------------------------------------

1.5 Services of internet ----------------------------------------------------------------------------

World Wide Web (WWW) -------------------------------------------------------------- 24

Email --------------------------------------------------------------------------------------- 25

Social Networking ------------------------------------------------------------------------

VoIP ----------------------------------------------------------------------------------------

Mailing List -------------------------------------------------------------------------------

News Group -------------------------------------------------------------------------------

Commerce ---------------------------------------------------------------------------------

Role of E-Commerce ------------------------------------------------------------

Types of E-Commerce ----------------------------------------------------------

Advantages of E-Commerce ---------------------------------------------------

Function of E-Commerce Web Sites ------------------------------------------

TELENET ----------------------------------------------------------------------------------

FTP ------------------------------------------------------------------------------------------

Internet Relay Chat (IRC) ---------------------------------------------------------------

Instant Messaging (IM) ------------------------------------------------------------------

Basic Terminologies of Internet -----------------------------------------------------------------

Advantages of Internet ----------------------------------------------------------------------------

Benefits of Internet for Students -----------------------------------------------------------------

Benefits of Internet for Business Organization ------------------------------------------------

Web Browser ----------------------------------------------------------------------------------------

Function of Web Browser ----------------------------------------------------------------

Type of Web Browsers -------------------------------------------------------------------

Web Server ------------------------------------------------------------------------------------------

[Link]
 12
C.S-Series Modern Web Programming
Microsoft Internet Explorer ------------------------------------------------------------------------

Main Window of Internet Explorer------------------------------------------------------

Auto Complete Feature of Internet Explorer---------------------------------------------

Saving a web page---------------------------------------------------------------------------

Web Directories---------------------------------------------------------------------------------------

Search Engines----------------------------------------------------------------------------------------

Searching the Web--------------------------------------------------------------------------

Types of Websites-----------------------------------------------------------------------------------

Multimedia on Web----------------------------------------------------------------------------------

Netiquette---------------------------------------------------------------------------------------------

Web Page Program Development------------------------------------------------------------------

Role in Web Site Development Team----------------------------------------------------

Scripting Languages---------------------------------------------------------------------------------

Web Hosting------------------------------------------------------------------------------------------

Web Hosting Services---------------------------------------------------------------------

Types of Web Hosting----------------------------------------------------------------------

Web Hosting Technologies

Web Publishing

Cookies

Type of Cookies

Uses of Cookies

Browser Setting for Cookies

Privacy Concerns about Cookies

TCP/IP

Internet and Extrant

Web 2.0

[Link]
 13
C.S-Series Modern Web Programming
Web 3.0

Part 2: Core Markup

Hyper Text Markup Language
Introduction to HTML4.0

HTML4.0

Tags and Attributes

Benefits of HTML

Limitation of HTML

Web page Creation Using HTML

Basic structure of HTML Document

Headings

Paragraph

Line Breaks

Horizontal Line

Text Formatting

Fonts

<BIG> AND <SMALL> Tags

Preformatted Text

Spaces

<DIV> Tag

<SPAN> Tag

<MARQUEE> Tag

HTML Comments

XML

XHTML

Changes in XHTML from HTML

[Link]
 14
C.S-Series Modern Web Programming
Flavors of XHTML 1.0

Validating XHTML Documents

Difference between XHTML and HTML

List, Images and Tables

Lists

Ordered Lists

Unordered Lists

Definition Lists

Nested Lists

Images in HTML

Using Images in HTML

Tables

The <TR> Tag

The <TD> Tag

The <CAPTION> Tag

Hyperlinks

Types of Hyperlinks

Creating Hyperlinks in HTML

Links to another Web Page

Links to the Page of other Website

Links to other Parts of the Same Page

Email Hyperlinks

Images as Hyperlinks

Hyperlinks in Lists

Hyperlinks in Tables

Image Maps

[Link]
 15
C.S-Series Modern Web Programming
Frames and Forms

Frames

Advantages of Frames

Disadvantages of Frames

Nested Frames

Forms

Uses of Forms

Form Elements

Text Field

Password Field

Radio Button

Checkbox Field

Selected Field

Text Area Field

Button

File Upload Field

Submit Button

Reset Button

Introduction to HTML5.0
HTML5

Part 3: Core Styles

Cascading Style Sheets

DHTML

Benefits of DHTML

Disadvantages of DHTML

Cascading Style Sheets

[Link]
 16
C.S-Series Modern Web Programming
Cascading Order

Benefits of Style Sheet

Parts of Style Sheet

Types of Style Sheets

External Style Sheets

Internal Style Sheets

Inline Style Sheets

CSS and Text

Special Effects

Text Effects

Text Layout

Lists

CSS and Hyperlinks

CSS and Backgrounds

Background Colors

Background Images

Background Control

CSS and Borders

Parts of Border

CSS and Tables

CSS and Scrollbars

CSS and Cursors

CSS Class

Part 4: JavaScript
Introduction to Java Script

Scripts

[Link]
 17
C.S-Series Modern Web Programming
Server Side Scripts

Client-Side Script

Java Script

Advantages of JavaScript

Uses of JavaScript

Running JavaScript

Data Types

Variables

Variable Declaration

Variable Initialization

Literals

Floating-Point Literals

Integer Literals

String Literals

Type Conversion

Expressions

Operators

Assignment Operators

Arithmetic Operator

Operator Precedence

Operator Associativity

Type Casting

Implicit Type Casting

Explicit Casting

Conditions and Loops

Conditional Statements

[Link]
 18
C.S-Series Modern Web Programming
Relational Operators

Relational Expression

If Statement

If… else Statement

Nested “if” Statement

Logical Operators

Switch Statement

Conditional Operator

Loops

While loop

do-while loop

for loop

“continue” Statement

“break” Statement

Nested Loop

Functions and Arrays

Functions

Function Declaration

Function Call

Passing Parameters to Functions

Returning Value

Local Variables

Global Variables

Built-in Functions

Dialog Boxes

Conversion Functions

[Link]
 19
C.S-Series Modern Web Programming
Arrays

Array Declaration

Assigning Values to Array

Retrieving Values from Arrays

Passing Array to Function

Manipulating Arrays

JavaScript Object Module

JavaScript Object Module

Objects

Browser Objects

Arrays of Objects

Form Elements

Events

Event Handlers

Forms and Events

Button Element

Text Element

Password Element

Checkbox Element

Text Area Element

Select and Option Elements

Form Validation

Common Validation Types

Advanced JavaScript

Date Object

Image Object

[Link]
 20
C.S-Series Modern Web Programming
Window Object

History Object

String Object

Part 5: PHP
Part 6: SQL
Part 7: MySQL
Part 8: CMS System
1. Introduction to CMS System…………………………………

Part – 1

Introduction to Internet
[Link]
 21
C.S-Series Modern Web Programming

Includes:
____________________________________________________
Chapter 1 Internet & World Wide Web

Internet & World Wide Web

Internet:
Internet is a huge collection of computers all over the world that are
connected to one another. It is a global network of computers. These
computer are connected through different telecommunication lines like

 Phone Line
 Fiber optic lines
 Satellites and wireless Connections

Internet is used to find information stored on the computers called hosts

or servers.

These computers are use a common protocol called TCP/IP for

communication. TCP/IP stands for Transmission Control Protocol / Internet
Protocol. Each computer connected to internet can act as host. A host
computer provides information to the people. Today, more than 100 million
users around the world connect to internet. Many people, organizations,
universities and research agencies participate to manage the internet.

[Link]
 22
C.S-Series Modern Web Programming

Uses of Internet:
Some uses of internet are as follows.

 To Access information, news, research, and educational material

 To conduct business
 To access sources of entertainment such as online games, magazines
etc.
 To shop for goods and services
 To meet and talk with people around the world in discussion groups or
chat rooms.
 To access other computers and exchange files.
 To send message and receive messages from other connected users.

Working of Internet:
The internet is a collection of millions of computers. These computers are
linked together on a computer network. The network is used by the
computers to communicate with one another. A personal computer can be
connected to Internet by using phone lines, DSL, Fiber optic lines, Cell phone,
Satellite or Wireless connection and cable modem. These devices
communicate with the server of Internet service provider.

A user computer is usually connected with ISP using different resources. ISPs
are connected to larger ISPs. Several main transmission media carry the
heaviest amount of traffic on internet. These carriers of network traffic are
collectively called Internet backbone. Backbones are connected through fiber
optic lines, submarine cables or satellite links. In this way, every computer
on the Internet is connected to every other computer.

The computers connected to the Internet exchange data and information

using servers and clients. A client computer accesses data, information and
services from different servers. The server computers are also called host
computers.

Impacts of Internet on Society:

The impacts of the internet on the society are as follows:

 Globalization: Internet has converted this world into a global village.

People are connected with one another using the Internet. It has
provided more opportunities of interaction. It also enables people to
understand the views of one another.

[Link]
 23
C.S-Series Modern Web Programming
 Flow of Information: Internet contains information on all types of
topics. People search information on any topic. Search engines are
used to search information on Internet. Easy access to information has
enabled people to be informed.
 Better Understanding: Internet is an easy way of communication
among people. They can exchange their views. It has created better
understanding. People can understand the views and thinking of one
another. It helps in creating harmony and peace in the world.
 Comfort in Life: The use of internet has provided many comforts for
society. People can perform their duties easily. They can sell and buy
goods online. They can run their business using Internet.
 Knowledge: Internet is a source of huge information. People can get
information from websites. They can interact with different people,
scholars and learned persons to get knowledge.

History of Internet:
The work Internet was started in 1960s during Cold War of Russia and
America. America wanted to communicate with Armed Forces. A network of
four computers was developed in the beginning for this purpose.

ARPANET:
During Cold War, Russia launched Sputnik satellite and America developed a
network known as ARPANET. It was developed for Advanced Research Project
Agency (ARPA). ARPA worked on a project to send information to armed
forces at long distances. Different organizations and universities also
involved in this research.

Paul Baran:
In 1964, Paul Baran published a paper on Distributed Communication
Networks. It was a theoretical idea for data transfer. It included:

 Decentralization of data storage

 Digital Packets
 Routers for data transfer

NCP Protocol:
Protocol is a collection of rules. In 1970s, NCP (Network Control Protocol)
was developed. It was the first standard protocol for data transfer.

[Link]
 24
C.S-Series Modern Web Programming

DARPA:
DARPA stands for Defense Advanced Research Projects Agency. It was a new
name of ARPA. Now 37 computers were connected together. DARPA started
work to share data not only on single network but also among different
networks. Stanford Research Institute took part in this research.

TCP/IP:
A team of Stanford Research Institute developed a protocol called TCP/IP. It
stands for Transmission Control Protocol/ Internet Protocol. It was designed
to share and transfer data among different networks.

BITNET & CSNET:

BITNET stands for Because It’s Time Network and CSNET stands for
Computer Science Network. These were established for non-military persons.
These networks were used for academic and research purposes. In these
networks, IBM computers and university computers were connected
together.

World Wide Network:

Soon the idea of internet came out. Different universities and research
institutes started work on a global network. In 1986, NSFNET was developed.
It connected academic researched of different counties together.

Internet:
Internet is now the largest network in the world. Millions of computers are
connected together through different medium. People can share information,
data. Any computer with a modem and telephone line can become a part of
the internet.

Connection to the Internet:

Anyone can connect to the internet by using the services of any internet
service provider. Following things are required to establish a connection to
internet.

 Computer: any computer can be used for connection to internet.

[Link]
 25
C.S-Series Modern Web Programming
 Modem: modem is an electronic device that is used to transfer data
over internet. It links the computer with the internet using telephone
line.
 Dialup Software: dialup software is used to establish a connection
between personal computer and a server of an ISP.
 ISP Connection: ISP stands for internet service provider. It provides
the link between the computer and the internet. A person has to get an
account of an ISP for establishing a connection to internet.
 Web Browser: internet browser is software that is used to view web
page. Microsoft internet explorer, Google chrome, Mozilla Firefox and
Netscape Communicator are popular web browsers.

More high-speed connections are also available to connect to the

internet such as DSL, ISDN and cable television internet service. DSL
stands for digital subscriber line and ISDN stands for Integrated Service
Digital Network. These technologies provide high speed internet
connections using telephone lines. Cable modem provides high speed
internet connection through cable television network. These technologies
are always connected to the internet when the computer is running. The
users do not have to dial a connection to connect to the internet, which is
necessary in case of dial-up access.

Addressing Scheme:
Internet addresses are used to access different computers on the internet.
Each computer on the internet has become a unique address. This address is
used to establish a connection with that computer. There are two types of
addressing schemes on the Internet.

IP Addressing:
IP addressing is a unique number that refers to a computer connected to the
Internet. IP stands for Internet Protocol. This address is a 32-bit number. It
consists of four numbers separated by period. Each number is between 0 and
255. These numbers are known as octets. An example of IP address is
[Link]. Normally, first number indicates a network and the last
number indicates a specific computer.

A server on the Internet has a static IP address. It does not change very
often. When a computer connects to the internet, it also gets an IP address
by the ISP. This IP address is used only during session and is not static.

[Link]
 26
C.S-Series Modern Web Programming

DNS Addressing:
IP address is difficult to remember for the users. All servers on the internet
also have human-readable names. It is known as domain names. A domain
name consists of text instead of number. It is easier to remember a domain
name than IP address.

For example, [Link] is a permanent and human-readable name. It

is easier to remember than IP address. It actually has two parts:

 Host name
 Domain

The domain represents the institution that uses the address. The domain
names are called top-level domains. Each domain name has a top-level
domain that indicates the type of organization associated with domain
name. The domain name outside United States also includes the country
code. The country code of Pakistan is pk e.g. [Link]

Internet Corporation for assigned Names and Numbers (ICANN) is a group

that assigns and controls the top-level domains.

A method is used to store domain names and corresponding IP address is

called domain names system (DNS). When the user specify a domain
name, DNS server converts it into its corresponding IP address. DNS
server is associated with n Internet access provider.

Root Zone File

Top level jp uk … com org edu

Domain (TLDs)

amazon aol
co ac

yaho

[Link]
 27
C.S-Series Modern Web Programming

The top-level domains are as follows:

Domain Type
com Commercial organizations
edu Educational institutions
gov Government departments
mil Military organizations
net Network providers
org Non-profit organizations
museum Accredited museum
biz Business organizations
info Organizations or individuals providing general
information
name Individuals of families
pro Professional like doctors, engineers
aero Aviation community members
coop Cooperative societies and unions

Services of Internet: Following are some important services of

the Internet:

World Wide Web (www)

WWW stands for World Wide Web. It is also called web.

It provides the facility to publish information on the Internet. It is a collection of documents or

web pages stored on computers permanently connected with internet around the world.

A web page is a document that may include text, graphics, audio, video and software etc. these
web pages are connected to one another using hyperlinks. Web pages are also known as
hypertext documents. Anyone can view web pages through a web browser. A collection of
related web page is called web site. Each web site has a unique address. Web sites are stored on a
host computer on the internet. These computers are known as web server. The process of
launching a web page is called publishing the page.

Purpose and uses of www:

Advertisement: Manufacturers use www to provide information of their products.

[Link]
 28
C.S-Series Modern Web Programming
Shopping: It is possible for user to buy an item using www. You can see products and prices,
and even order them by using your credit card etc.

Flight information: it is used to provide the latest information on flights arrivals and departures.

Television Station: www provides information about programs, the latest news and special
events. Some television show different event live on their websites.

Celebrities Sportsman and Film Actors: important celebrities can contact their fans, provide
information about them and send their pictures.

Government Authorities: government authorities can provide information about services and
facilities for the people.

News: most newspaper have their website. Latest news and interviews are provided on these
websites.

Encyclopedia Publisher: Online encyclopedias are available. You can find detailed information
on any topic in the world.

Search Engines: Search engine is a website that provides the facility to find required websites
on a particular topic. You can find thousands of websites about any topic.

Medical: many sites in the world provide detailed information on diseases. You can also consult
a panel of on-line doctors to get the advise about any medical problem.

Email:
Email stands for Electronic Mail. It is the exchange of messages and files through internet.
Message can be in the form of graphics, sounds, video clips or simple text. It is a fast way of
sending message anywhere in the world. The sender and receiver may be setting in the same
building or anywhere in the world. One email message can be send to multiple recipients. Email
facility is provided by many internet service provider or specialized websites. Yahoo, Hotmail
and Gmail are examples of popular email providing websites.

Working of Email:
An email program is used to create, send and receive emails. It is also known as email client.
When the user sends an email message, the computer connects to an email server and transmits a
copy of the message to that server.

Email server is host computer on the internet that is used to send and receive emails. The email
server receives the message and finds out the email server where that email is to be sent. It
connects to that server and transmits another copy of the message.

[Link]
 29
C.S-Series Modern Web Programming

Email Attachment:
An email message can also contain attachment. Attachment is process of sending connecting
files with email message. Any type of file can be attached to email such as documents,
spreadsheets, audio and video etc.

MIME stands for Multipurpose Internet Mail Extension. It is an internet protocol that supports
email attachments. Different websites provide different file size that can be attached with an
email message.

Advantages and Uses of Email:

Some advantages of email are as follows:

 It is very fast and timely.

 It is very cheap and inexpensive.
 People can send and receive message anywhere in the world.
 People can share your information among different people.
 It is possible to send and receive emails through mobile phone.
 Email gives us the facility to send pictures, sounds and videos.

Disadvantages of Email:
Some limitations of email are as follows:

 Email does not provide high privacy. An email passes from one computer system to
another through different networks. The system administrator of a network or a hacker
can read the contents of emails.
 Junk email is an unwanted email. It is also known as spam. A person may send such
email that the receiver does not want to read. A large number of junk emails may fill the
space of email account.
 An email message cannot express emotions properly. The receiver cannot view the facial
expression or voice of the sender.
 Email is read when the user connects to the internet and check email account. An urgent
message may be ignored or delayed.
 Email may not be delivered successfully due to communication error.
 Most of the viruses are spread through email messages. Virus can spread if the user opens
an email containing a virus.

Email Address:
Every email account has a unique address. An email address usually has two parts which are
separated by the symbol @. These parts are as follows:

[Link]
 30
C.S-Series Modern Web Programming
 User ID
 Identity of email service

Example:
shahidlashari@[Link]

In this example shahidlashari is called user ID. It is used to sign into email service.

@ It is “at” sign. It separates account ID from name of email service provider.

[Link]: it indicates the email service provider.

Social Networking:
Social networking is a way of publishing online communities. The people use social networking
websites to interact with one another. Myspace is an example of social networking sites.
Professionals also use social networking site such as Linkedln,

VoIP:
VoIP stands for voice over Internet Protocol. It is also called Internet telephony. It is used to
speak to other users over the internet. VoIP uses the internet instead of telephone network to
connect a user to other user. It requires high-speed internet connection like DSL.

Mailing List:

A mailing list is a collection of email names and addresses given a single name. an email
message sent to a mailing list is received by every person on the list. Different people discuss
different topic and distribute their ideas to other people by email. Softwares are available to
administrate mailing lists. The most common program is listserv.

News Groups:
A news group is a discussion group on the internet. People exchange information on a vast range
of topics such as news, business, science and computer. A user sends message to the news group
to participate in discussion. Other users in the news group read and reply to the message. A
software is required to obtain articles from news server. A news server is a host computer that
exchanges articles with other servers on the internet. These servers use Network News Transfer
Protocol (NNTP) to communicate. The users have to subscribe on a news group to view articles
on a specific topic.

E-Commerce:

[Link]
 31
C.S-Series Modern Web Programming
E-Commerce stands for electronic commerce. E-Commerce means to carry
out financial and business dealings using internet. A person can deal with his
customers throughout the world. People can buy and sell goods on internet.
Even payments can be made using Credit Card numbers etc. The trend of E-
Commerce is rapidly becoming popular.

Role of e-commerce:

The role of e-commerce in daily life is becoming very important. E-commerce

can be used in the following ways:

1. Online education:
Online education is becoming very popular. Different types of
interactive tutorials are available on the internet. The students can
browse these online books and tutorials or can download them after
purchasing. Some websites provide online lectures for the students.
2. Electronic banking:
Many banks are now introducing electronic banking. Using your
computer you connect to the bank’s computer system via the internet
and control your daily financial dealing from home. It reduces the staff
and building of banks. Many customers pay their bills from their bank
accounts using this facility.
3. Electronic Shopping:
It has become very easy for the people to shop from home using
internet. Different manufacturers present their products on the
internet. People can browse the website, place an order and even
make a payment using credit card. It has made shopping very easy.
4. Job Search:
Internet is used to search different types of jobs all over the world.
Many websites are the developed that provide information to the
people about job vacancies. Job seekers can also apply for the job
using internet.
5. Conducting Auction:
Many websites provide the facility of auction. People participate in the
auction to purchase a product. The can also pay the price using their
credit cards etc. a popular website that provides this facility is eBay.
6. Collaboration with Partners:
Businessmen can collaborate with their partners using internet. They
can discuss ideas, exchange views and make strategies in
collaboration with business partners in the world.
7. Marketing and Advertising:

[Link]
 32
C.S-Series Modern Web Programming
E-Commerce is playing an important part to make and advertise
products all over the world. The use of popular websites can be
effective way of introducing a product to the customers.
8. Providing Customer Services:
Businessmen can interact with their customers using the internet. They
can discuss different issues about their products. The can also deal
with their complaints and provide different services to them.
9. Online Travel Reservation:
Online travel reservation is a popular use of e-commerce. People can
reserve seats in airline flights, hotels or car using the internet.
10. Online trading:
Online trading is a process of conducting business using the internet.
The stockbrokers can do all trading activities electronically. The can
submit and receive bids using computers. The can also interconnected
with computer display screens where brokers match the buyers with
sellers. It reduces the cost as no paper or special building is required to
conduct these activities.

Types of e-commerce:

Three types of E-Commerce are as follow:

1. Business-to-consumer:

Business to consumer or B2C e-commerce consists of the sale of goods

and services to the general public. In this type customers or consumer
can visit the website and purchase goods online. It is done by an
electronic storefront that contains product details, graphics and shopping
cart. Shopping cart is used to collect the purchase. Online shopping is
normally performed using a secure internet connection.

2. Consumer to consumer

Consumer to consumer or C2C e-commerce takes place between two

consumers. For example, one consumer sells an item through online
auction. The other consumer purchases the item by offering highest bid.
Many websites provide the facility of online auction where C2C e-
commerce occurs. A popular website providing this facility is eBay.

3. Business to business

Business to business or B2B e-commerce takes place between two

businesses. One business provides services to other business. Online

[Link]
 33
C.S-Series Modern Web Programming
advertisement, recruiting, sales, marketing, technical support and training
are some examples of B2B e-commerce. For example, some companies
provide online purchasing, tracking and transaction facilities to other
companies.

Advantages of e-commerce:

Function of e-commerce web sites:

TELENET:

FTP:

Internet Relay Chat (IRC)

Instant Messaging (IM):

Basic Terminologies of internet:

Website

Home page

Hyper link

Image map

Frame

Table

HTTP

HTML

Webmaster

Domain name

URL

ISP

SMTP

[Link]
 34
C.S-Series Modern Web Programming
DNS

Advantages of Internet

Information search

Email

E-commerce

Online results

Online shopping

Fast communication

Discussion groups

Job search

Entertainment

Online education

Research

Advertisement

Video conferencing

Government authorities

News

Encyclopedia publisher

Search Engines

Medical

Disadvantages of Internet

Hacking

Immorality

Security problems

[Link]
 35
C.S-Series Modern Web Programming
Viruses

Wastage of time

Cyber crime

Benefits of Internet for Students

Online education

Downloading software

Online results

Online tutorials & Lectures

Research

Online encyclopedia

Discussion groups

Information search

Benefits of Internet for Business Organization:

Providing Customer Services

Online trading

Wider Customers base

Competitive advantage

Web Browser

Functions of Web Browser:

Types of Browsers

Text-based Browsers

Graphical Browsers

Web Server

Web directories

[Link]
 36
C.S-Series Modern Web Programming
Search Engines

Searching the web

Search using Boolean logic

AND

OR

NOT

Search by phrase

Search using truncation

Most popular search engines

Types og websites

Portal

News

Information

Business/Marketing

Educational

Entertainment

Advocacy

Personal

Multimedia on web

Graphics

Animation

Audio

Video

Virtual reality

[Link]
 37
C.S-Series Modern Web Programming
Plug-ins

Netiquette

Web page program development

HTML

Scripts

Applet

Servlet

ActivX Controls

Advantages of using Applet, Scripts & ActivX Controls

Roles in web site development team:

Server Administrators:

HTML Coders:

Designers:

Writers and Information Designers:

Software Programmers:

Database Administrator:

Marketers:

Scripting Languages:

Java

javaScripts

VB Scripts

PERL

DHTML

XML

[Link]
 38
C.S-Series Modern Web Programming
XHTML

WML

The .NET Platform

Web page Authoring Software

Web Hosting

Web Hosting Services

Types of web Hosting

Shared Hosting

Dedicated Servers

Virtual Dedicated Servers

Managed Hosting

Web hosting technologies

Web publishing

Cookie

Example

Types of cookies

Uses of cookies

Browser setting for cookies

Privacy Concerns about Cookies

TCP/IP

Internet and Extranet

Internet

Extranet

Difference between Internet & Extranet

[Link]
 39
C.S-Series Modern Web Programming
Web 2.0

Blogs and Vlogs

Wiki

Podcasts and Vodcasts

Social networking

Tagging

Collaboration tools

Web 3.0

Symbol Name Symbol Name

` Grave Accent ~ Tilde

! Exclamation Sign @ Commercial AT

# Hash or Number Sign $ Dollar Sign

% Percent Sign ^ Circumflex Sign or Caret

Ampersand Sign or
& * Asterisk
Concatenation Sign

( Left or opening Parenthesis ) Right or closing Parenthesis

- Hyphen _ Underscore or Low Line

= Equals Sign + Plus Sign or Sign of Addition

[Link]
 40
C.S-Series Modern Web Programming

[ Left Squares bracket ] Right Square Brackets

{ Left Curly Bracket } Right Curly Bracket

; Sami Colon : Colon

Single Quotation Mark, or

‘ Apostrophe
“ Double Quotation Mark

Reverse Slash, Or Reverse Vertical Bar or Broken bar or

\ Solidus
¦ Pipe sign

, Comma < Less-Than Sign

. Full Stop > Greater Than Sign

Forward Slash, or Forward

/ Solidus
? Question Mark

Introduction to HTML
HTML stands for Hyper Text Markup Language. It was developed in
early 1990s. it is a formatting language used to develop web pages.
Hypertext means that the HTML marks certain words in the document as
links to other parts of the same document or other document. When the user
clicks on a link, browser starts displaying the document attached to that link.

HTML is not a programming language. It is used to define text,

graphics, audio and video in web pages. It uses tags or markups to specify
how the contents of web page will be displayed. HTML code can be written in
any text editor like Notepad. But I suggest u EditPlus because it is very easy
to use and provide mostly html tags in tool bar.

HTML was developed a few years ago as a subset of SGML. SGML

stands for Structured Generalized Mark-up Language. It is also describes
formatting and hypertext, links and different components of document. It is
basically an application- oriented document format. SGML is not ideal for
transformation across the internet to different types of computers and
browser applications.

[Link]
 41
C.S-Series Modern Web Programming
HTML is simpler than SGML. It was designed for use over the internet in
the form of web pages. HTML is more suited for this purpose. It is used to
design and create pages for different types of users for the web.

Tags and attributes:

HTML commands are known as tags. The HTML tags are surronded by
the two characters < and >. These characters are called angle brackets.
HTML tags normally come in pairs like <head> and </head>. The first tag in
a pair is called start tag and the second tag is called the end tag.

An element is a command that tell a browser to do something such as

<H1>. It is a fundamental component of HTML document. Different tags
indicate different elements i.e. HEAD, TABLE etc. the text between the start
and end tags is called element content. HTML tags are not case sentitive. It
means that <head> is same as <HEAD>.

Some elements may also include some attributes. An attribute is the

additional information about the element that is includeed inside the start
tag. Some attributes are compulsory and some are optional.

Benefits of HTML:
Some advantages of HTML are as follows:

 Simplicity: HTML is a simple but powerful language. Any person can

use HTML easily to create web pages.
 Platform Independent: HTML is platform independent. It works on
any platform. It means that HTML documents created for one type of
computer system can be used on different types of computer system.
 Easy Navigation: HTML web pages are linked together
usinghyperlinks. It provides easy navigationbetween different
documents.
 Atteactive and Easier to Read: HTML allows to the use of graphics
and animation. It deliver richers content and arranges the content
creatively.

Limitations of HTML:
Some limitations of HTML are as follows:

 No Programming Capabilities: HTML provides no programming

capabilities. It only provides formatted text, pictures and sounds etc.

[Link]
 42
C.S-Series Modern Web Programming
 Static: HTML can only be used to create static web pages.
 Fixed Tag Set: HTML does not provide the facility to create
customixed tags. It only provides a predefined set of tags. It is not
possible to extend HTML.
 Not Reusable: HTML code is used for specific pages and cannot be
reused. The user cannot display the same HTML document in a
different manner without creating different documents each time.

Web Page Creation using HTML:

The basic requirements to create web pages using HTML are as follows:

 Text Editor: it is used to write HTML commands. Any simple text

editor like notepad or editPlus can be used for this purpose.
 Web Browser: It is used to test the web pages. Internet Explorer and
Netscape Navigatior are two popular web browsers.

Basic Structure of HTML Document:

The basic structure of an HTML document is as follows:

<HTML>

<HEAD> Text </HEAD> (Head Section)

<BODY>

</BODY> Actual Document

</HTML>

In every HTML document, <HTML> and </HTML> tags indicate the beginning
and end of the document. These tags inform the browser that the document
is an HTML file. All other HTML tags must be written within these tags.

The HTML document can be divided into two sections:

 Head Section
 Body Section
1. Head Section:
<HEAD> and </HEAD> tags identify the heading or title of document.
The tags <TITLE> and </TITLE> can appears only in this section. The
text between the title tags appears as title in the browser’s window. Its
length should not more than 60 characters.

[Link]
 43
C.S-Series Modern Web Programming
2. Body Section:

The body of an HTML document contains the text that is displayed on a

web page. The body section is enclosed within <BODY> and </Body>
tags. It gives a description of the document layout and structure.

Practical No. 01
Write HTML code that displays a simple message on the web page.

Solve: Open notepad or any editor write the following code:

<HTML>

<HEAD>

<TITLE> My first HTML page </TITLE>

</HRAD>

<BODY>

HTML stands for Hyper Text Markup Language

</BODY>

</HTML>

Save the file as “[Link] on hard disk.

Double click the file. The web page will appear in browser as follows:

Attributes:
Some important attributes of <BODY> tags are as follows:

Attribute Description
BGCOLOR It specifies the background color of the web
page.
BACKGROUND It specifies the background picture of the web
page.
TEXT It specifies the color of the text displayed on
the web page.
Example:

[Link]
 44
C.S-Series Modern Web Programming
<BODY BGCOLOR= “red” TEXT=”yellow”>

In the above example, the background color of the web page is red and text
color is yellow. The color name or its hexadecimal code can be given as the
value of the attribute.

<BODY BACKGROUND=[Link]” TEXT=”green”>

In the above example, “[Link]” will appear in the background of the web
page. It should be stored in the some directory in which the web page is
stored. If the picture is stored in some other directory, the complete path of
the picture should be given in the attribute.

Headings
Headings are very important tags in the BODY of HTML document. It is
used to display different types of headings. The opening tag for a heading is
<Hn> and the closing tag is </Hn> where n is the size of heading. Its value
is from 1 to 6. The value 1 represents the largest and the value 6 represents
the smallest heading size.

Attributes:
Attribute Description
ALIGN It specifies the alignment of heading. The
possible values are center, left and right.
The default value is left.
Example:

<H1 ALIGN=“center”>Hello Heading</H1>

The above line will display the heading in the center of the page.

Practical No. 02
Write HTML code that displays six types of heading in a web page.

Open Notepad and type the following code:

<HTML>

<BODY>

<H1 My 1st Heading. <.H1>

<H2 My 2nd Heading. <.H2>

[Link]
 45
C.S-Series Modern Web Programming
<H3 My 3rd Heading. <.H3>

<H4 My 4th Heading. <.H4>

<H5My 5th Heading. <.H5>

<H6 My 6th Heading. <.H6>

</BODY>

</HTML>

Save the file as “[Link]”.

Double click the file. The web page will appear in the browser as follows:

Paragraphs:
Paragraphs are used to add text to a document in such a way that it will
automatically adjust the end of line to suit the window. Paragraphs are
defined with the <P> tag. The use of ending tag </P> is optional.

<P>This is a paragraph</P> <P>This is another paragraph</P>

HTML automatically adds an extra blank line before and after a paragraph.

Attributes:
Some important attributes of paragraph tag are as follows:

Attribut Description
e
ALIGN It specifies the alignment of paragraph. The
possible values are center, left and right the
default value is left.
Example:

<P ALIGN=“right”>I am a paragraph.</P>

Practical No. 03
Write HTML code displays three paragraphs with different paragraph
alignments.

Open Notepad and type the following code:

[Link]
 46
C.S-Series Modern Web Programming
<HTML>

<BODY>

<P ALIGN=“Center”> HTML stands for Hyper Text Markup Language. It is a

formatting language used to develop web pages. It is very interesting and
simple to use </P>

<P ALIGN=“right”>HTML stands for hyper Text Markup Language. It is a

formtting language develop web page. It is very interesting and simple to
use.</P>

<P ALIGN=“left”>HTML stands for hyper Text Markup Language. It is a

formtting language develop web page. It is very interesting and simple to
use.</P>

</BODY>

</HTML>

Save the file as “[Link]”

Double click the file. The web page will appear in the browser as follows:

2.5 Line Breaks:

Line breaks are used to decide where the text will break on a line or continue
to the end of the window. It can be used to move the control to the next line.
The <BR> tag is used to end a line without inserting a new paragraph. The
<BR> has no closing tag.

Example:
The following text will be displayed in single line.

Sentence One.

Sentence Two.

The following text will be appear in two different lines.

Sentence One. <BR>

Sentence Two. <BR>

[Link]
 47
C.S-Series Modern Web Programming

Practical No. 04
Write HTML code that displays text in four lines using <BR> tag.

Open Notepad and type the following code:

<HTML>

<BODY>

Three important things in life are: <BR>honesty<BR>sincerity<BR>and

loyalty.

</BODY>

<HTML>

Save the file as “[Link]”

Double click the file. The web page will appear in the browser as follows:

2.6 Horizontal lines:

Horizontal lines are used to separate different areas of a web page it is used
to display a horizontal line in the page. The tag for horizontal line is <HR>.
This tag has no closing tag.

Attributes:
Some important attributes of HR tag are as follows:

Attribute Description
ALGIN It specifies the alignment of the line. Possible values
are left, right and center. Line appears in center by
default
SIZE It specifies the size of the line. The default size is 2
pixels.
WIDTH It specifies the width of line. Size can be given in
pixels or percentage. The width of line is according
to the width of webpage by default.
NOSHADE It turns off the shading of the line.
COLOR It specifies the color of the line.

[Link]
 48
C.S-Series Modern Web Programming

Example:
<HR WIDTH=50 ALIGN= “center” SIZE=4>

<HR WIDTH=50% SIZE=7 NOSHADE>

Practical No. 05
Write HTML code that displays three horizontal lines with different attributes.

Open Notepad and type the following code:

<HTML>

<BODY>

<HR WIDTH=50 ALIGN=“right” SIZE=4 COLOR=“red”>

<HR WIDTH=50% ALIGN=“center” SIZE=7 COLOR=“brown”>

<HR WIDTH=100% SIZE=15 COLOR=“blue”>

</BODY>

</HTML>

Save the file as “break. html”

Double click the file. The web page will appear in the browser as follows:

1.7 Text Formatting

Different to format text are as follows:

Bold

<B> tag is used to display text in bold face style. It is closed by <B>tag.

Example

<B> Formatting makes thing cool. </B>

Italic

<1> tag is used to display text in italic style. It is closed by </1>tag.

[Link]
 49
C.S-Series Modern Web Programming
Example

<1> Italic text looks stylish</1>

Underline

<U> tag is used to display text as underlined. It is closed by </U>tag.

Example

<U> Underlined text looks prominent</U>

Superscript

<SUP> tag is used to display text as superscript. It is closed by </SUP>tag.

Example

N<SUP>2</SUP>

The above example will display N2

Superscript

<SUB> tag is used to display text as superscript. It is closed by </SUB>tag.

Example

N<SUB>2</SUB>

The above example will display N2

Practical No. 06
Write HTML code that displays text in different formatting.

Open Notepad and type the following code:

<HTML>

<B> Bold</B><BR>

<Italics</1><BR>

<U>Underline</U><BR>

X<SUP>3</SUP><BR>

[Link]
 50
C.S-Series Modern Web Programming
H<SUB>2</SUB>O<BR>

</HTML>

Save the file as “break. html”.

Double click the file. The web page will appear in the browser as follows:

2.7.1 Fonts
<FONT> tag is used to specify the characteristics of font. Different
characteristics include the typeface,saze and color. It is closed with </FONT>
tage.

Attributes:
Some important attributes of FONT tag are as follows:

Attribu Description
te
FACE It specifies the font of the text. The possible values
are “Arial” “Arial
Black” “Courier”and “MS sans Serif” etc.
SIZE It specifies the font of the [Link] can be from 1 to 7.
The default size is 3. The sixe can also be given as
relative to the default size. The size 1 displays 8pt
size, size 2 displays 10 pt and so on.
COLOR It specifies the font of the text. It can be given as
color name of hexadecimal value of the color.

The following tables shows the color name and its hexadecimal value:

Color Hexadecimal Color Hexadecimal

Value Value
Red #FF0000 Gray #808080
Green #00FF00 Dark Red #800000
Blue #0000FF Dark Green #008000
white #FFFFFF Yellow #FFFF00
Black #000000
Example:

<FONT SIZE=+2 FACE=“Verdana”>Verdana</FONT><BR>

<FONT SIZE=+2 FACE=“Arial”>Arial</FONT><BR>

[Link]
 51
C.S-Series Modern Web Programming
<FONT SIZE=+2 FACE=“Helvetica”>Helvetica</FONT><BR>

<FONT SIZE=+2 FACE=“Impact”>Impact</FONT><BR>

<FONT SIZE=+2 FACE=“Comic Sans MS”>Comic Sans MS</FONT><BR>

Practical No. 07
Write HTML code that displays text of different sizes and colors.

Open Notepad and type the following code:

<HTML>

<BODY>

<FONT FACE= “Arial” SIZE=+1”>One Size Larger</FONT><BR>

<FONT SIZE= “1”COLOR= “red”>Smalls Colorful</FONT>

<BODY>

</HTML>

Save the file as “[Link]”.

Double click the file. The web page will appear in the browser as follows:

2.7.2 <BIG> and <SMALL>Tags

<BIG>and <SMALL>tags change the relative size of text with respect to
surrounding

text.<BIG> tag makes the text a little bigger and <SMALL> tag makes the
text a little smaller. However, different browsers display the effect of these
tags differently. In Internet Explorer, text formatted with <BIG> tag is always
one size larger than the surrounding text. The tag has no effect if the size of
surrounding text is 7. The text formatted with <SMALL> is one size smaller
than surrounding text. The tag has no effect if size of surrounding text is1.

Example

The following line will display the text one size larger than normal size:

<BIG> Hello World</ BIG>

[Link]
 52
C.S-Series Modern Web Programming
The following line will display the text one size smaller than normal size:

<SMALL> Hello World</ SMALL>

2.7.3 Preformatted text

This tag is used to display the text as the user has [Link] ignores extra
line breaks and the text appears in single line. The text is placed between
<PRE> and <PRE>tags.

Example:

The following text will appear in single line. HTML ignores extra line breaks
so the text appears in single line.

Say this city has ten million souls Can you

belive it?

No body can belive it

The following text will appear in the browser as it appears below:

<PRE>

Say this city has ten million souls Can you

belive it?

No body can belive it

</PRE>

2.8 Spaces
If an HTML document has many space, additional spaces are removed
automatically. If the user inserted in the text by using character entity &nbsp
that stands for non breaking space

Example

<B> Hello World <B>

The above example will display Hello World

<B> Hello &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; World </B>

The above example will display Hello World

[Link]
 53
C.S-Series Modern Web Programming

Common Character Entities

Some common character entities are as follows:

Entity Name Description Output

&nbsp; Space
&lt; Less than <
&gt; Greater than >
&amp; ampersand &
&quot; Quotation mark ”
&cent; Cent
&pound; Pound
&yen; Yen
&sect; Section
&copy; copyright
&reg; Registered trademark
&times; multiplication
&divide; division

2.9 <DIV>Tag
<DIV> tag is used to define a section in an HTML document. It can be used
to group large section of HTML elements together and format them with
cascading style sheet. The closing tag </DIV> is used to indicate the end of
section

Attributes
Some important attributes of <DIV> tag are as follows:

Attribute Description
ALIGN It specifies the alignment of the DIV. The possible values are
center,left and right. The default value is left.
STYLE It is used to incluede inline cascading style sheet
Example
<DIV STYLE=”background-color:biue;text-align:right”>

<p>Hello World </p>

</DIV>

Practical No. 08

[Link]
 54
C.S-Series Modern Web Programming
Write HTML code that displays two sections of text with different formatting
with inline CSS using <DIV>tag.

Open Notepad and type the following code:

<HTML>

<BODY>

<DIV STYLE=”=”background-color:orange;text-align:center”>

<P>Its my style!</p>

</DIV>

<DIV STYLE=”border:1 px solid black; text-align: right”>

<p>It is another style.</p>

</DIV>

</BODY>

</HTML>

Save the file as “[Link]”.

Double click the file. The web page will appear in the browser as follows:

2.10 <SPAN> Tag

<SPAN> tag is used to provide additionl structure to HTML document. It is
used to group and apply styles to inline [Link] can be used to give
different characteristics to specific parts of other elements. The HTML span
element begins with <SPAN>tag and ends with </SPAN> tag. A style can be
applied to the content placed inside the SPNA tag using STYLE attribute.

Example
<p> This is paragraph

<SPAN STYLE=”color:#FF0000;”> This is a paragraph</SPAN>

This is paragraph</P>

<P>< SPAN STYLE=”color:#6600ff;”> This is another paragraph

</SPAN></P>

Practical No. 09

[Link]
 55
C.S-Series Modern Web Programming
Write HTML code that displays a paragraph using<SPAN> tag. It uses style
attribute to chang the characteristics of part a paragraph element.

Open Notepad and type the following code:

<HTML>

<BODY>

<P STYLE=”text-align: center font: ‘16 pt courier; color: ‘blue”’>

The color of the sky is blue,but if you look at the <SPAN STYLE=”color:
‘green”’>trees, they are green</SPAN/></P>

</BODY>

</HTML> save the file as “[Link]”

Double click the file. The web page will appear in your browser.

2.11 <MARQUEE> Tag:

HTML provides a special featyre to display scrolling and and animated
text in the web page. This tag is supported by internet explorer, Firefox and
netscape 7 and above. Netscape has a blink tag to display blinking text but
internet Explorer does not support blink tag.

Marquee tag can be used to scroll text or image in different directions.

The text places in side the marquee tag scrolls horizontally across the screen
or the web page. The scrolling text is normally used to give messages or
display some special announcement to the visitors.

Attributes:
Attribute Description
BEHAVIOR It indicates how the contents will scroll. The possible
values are scroll, slide, alternate. The scroll value is the
default value. It indicates that the content scrolls off the
edge of marquee area and then reappears on the other
side. The slide valu is almost the same. It also indicates
that when the content reaches the left edge, it stops
without scrolling off. The alternate value makes the
contents bounce back and forth. All contents remain visible
all the time.
BGCOLOR It is used to set the background color of the marquee. Its
value can be given as a combination of red, green and
blue or name of the color. The hexadecimal value of the
color can also be used.
DIRECTION It indicates the direction to which the marquee will scroll.

[Link]
 56
C.S-Series Modern Web Programming
The possible values are up, down, left and right. The
default value is left. The left value indicates that the
marquee starts at the right and moves to left across the
page. The right value indicates that the marquee starts at
the left and moves to right across the page.
HEIGHT It defines the height of marquee. It is given in pixels or
percentage.
HSPACE It is used to set the horizontal space to the left and right of
the marquee. Its value is given in pixels.
LOOP It specifies the number of times the marquee will scroll.
The default value is INFINITE.
SCROLLDELAY It is used togrher with SCROLLAMOUNT to set the speed of
the scrolling. Marquee moves the content by displaying the
content and then delays for some period of time specified
in SCROLLDELAY. Its value is given in milliseconds. The
default delay is 85
SCROLLAMOUN It is used together with SCROLLDELAY to set the speed of
T the scrolling. Marquee moves the content by displaying the
content and delay for some period of time. It then displays
the content in a new position specified in
SCROLLAMOUNTthat sets the size in pixels of each jump.
Ahigher value for SCROLLAMOUNT makes the marquee
scroll faster. The default value is 6.
WIDTH It defines the width of marquee. It is given in pixels.
VSPACE It is used to set the vertical space at the top and bottom of
the marquee. It is given in pixels
Example:
<MARQUEE> Marquee</MARQUEE>

<MARQUEELOOP=2>Hello</MARQUEE>

Practical No: 10
Write HTML code that displays three marquee with different attributes.

Open Notepad and type the following code:

<HTML>

<BODY>

<font size=”8” face=”courier” color=”blue”>

<marquee behavior=slide height=”25” width=”300” bgcolor=”red”>Hello

world!

</marquee></font>

[Link]
 57
C.S-Series Modern Web Programming
<font size=”4” face=”courier” color=”green”>

<marquee width=”100% behavior=”scroll” hspace=”15” vspace=”25”

bgcolor=”yellow>Hello World!</marquee></font>

<font size=”4” face=”courier” color=”blue”>

<marquee direction=”up” width=”100%” behavior=”scroll”

bgcolor=”yellow” loop=”3”>Hello world!</marquee></font>

</body>

</html>

Save the file as “[Link]”.

Double click on the file. The web page will appear in your browser.

HTML Comments:

<comment> tag is used to comment HTML code. It is recommended to

use<!--….--> to comment the tags. This tag is compatible to all browsers.
The comment can beinserted in any section an HTML document. The
comments are ignored by the browsers. They are primarily used to explain
the code in an HTML document etc.

Example:

<p>These are comments</p>

<!--These are another comments line-->

[Link]
 58
C.S-Series Modern Web Programming

Lists, Images and tables

Lists:

HTML can display different items in the form of lists. Lists are used to present
text in more readable form. Different types of lists are as follows:

1. Ordered Lists
2. Unordered Lists
3. Definition Lists

Ordered Lists:

An ordered list is a list of items in which each item is marked with a number
or letter. Ordered list is also known as numbered list. <ol> tag is used to

[Link]
 59
C.S-Series Modern Web Programming
create an ordered list. It stands for ordered list. <li> tag is used with each
item in the list. It stand for list item. It has no closing tag. </ol> tag is used
to close an ordered list.

Attributes:

Some important attributes of ordered list are as follow.

Type: It specific the number scheme for list. The default number scheme is
1, 2, 3…… Possible schemes are:

1 for 1, 2, 3…

A for A, B, C…

a for a, b, c…..

I for I. II, III….

I for I, ii, iii…..

Start: It specifies the starting number of the list

Value: It changes the numbering sequence in the middle of the list. It is

used in <li> tag.

Example:

<ol type=”A”>

<li>Red

<li>Green

<li>Blue

</ol>

Practical No: 11

[Link]
 60
C.S-Series Modern Web Programming
Write HTML code that display the following output:

<html>

<head>

<title></title>

</head>

<body>

My favorite fruit are as follos:

<;l>

[Link]
 61
C.S-Series Modern Web Programming
<li>Mango

<li>Apple

<li>Banana

</ol>

My favorite cities are as follows:

<ol type=”A”>

<li>Lahore

<li>Karachi

<li>Peshawar

</ol>

My favorite colors are as follows:

<ol type=”i”>

<li>Orange

<li>Red

<li>Green

</ol>

</body>

</html>

Save the file with “[Link]”.

Double click on the file. The web page will appear in the brpwser.

Unordered List:

[Link]
 62
C.S-Series Modern Web Programming
An unordered list is a list of item in which each item is marked with a symbol.
Unordered list is also known as unnumbered list. <ul> tag is used to create
an unordered list. It stands for unordered list. <li> tag is used with each item
in the list. </ul> tag is used to close an unordered list.

Save the file with “[Link]”.

Double click on the file. The web page will appear in the browser.

<tr>

<td>Enter your Password :</td>

<td>Requirements of Password :<br>

<ol type="1">

<li>Passwords must be changed at least once every academic year

<li>Passwords must be at least 8 characters long

<li>Passwords must include at least 4 of the following:

<ol type="1">

<li>At least one uppercase letter: A-Z

<li>At least one lowercase letter: a-z

<li>At least one digit: 0-9

<li>At least one special sign: ~ ` @ # $ % ^ & * ( ) + = \ | [ ] { } ? < >

</ol>

<input type="password" name="Password" size="40" maxlength="10"

style="background:silver" placeholder="Enter Your Password (Case
Sensitive)"></td>

</tr>

[Link]
 63
C.S-Series Modern Web Programming
<tr>

<td><b>Changing Your Password:</td>

<td>

<ol type="1">

<li>Click Link Change A Password

<li>In the old password text box, type your current password

<li>In the new password text box, type your desired new password

<li>In the confirm password text box, retype your new password

<li>Click OK

<li>The screen appears as Your Password is now changed.

</ol>

Recommendations

• Do not share your password with others

• Do not write down your password

• Do not choose a word or phrase that is commonly known about you

Composed By Shahid Laashary

Get further info or help contact me at
shahidlaashary@[Link]

[Link]