1.

WEB -- BASIC CONCEPTS

What is Internet?

The Internet is essentially a global network of computing resources. You can think of the
Internet as a physical collection of routers and circuits as a set of shared resources. It is a
computer network linking other computer networks in an intricate and most importantly, reliable
communications system.
Some common definitions given in the past include −

A network of networks based on the TCP/IP communications protocol.

A community of people who use and develop those networks.
Internet-Based Services

Some of the basic services available to Internet users are −

Email − A fast, easy, and inexpensive way to communicate with other Internet users
around the world.

Telnet − Allows a user to log into a remote computer as though it were a local system.

FTP − Allows a user to transfer virtually every kind of file that can be stored on a
computer from one Internet-connected computer to another.
UseNet news − A distributed bulletin board that offers a combination news and
discussion service on thousands of topics.
World Wide Web WWW − A hypertext interface to Internet information resources.
What is WWW?

WWW stands for World Wide Web. A technical definition of the World Wide Web is − All
the resources and users on the Internet that are using the Hypertext Transfer Protocol
HTTP.
A broader definition comes from the organization that Web inventor Tim Berners-Lee helped
found, the World Wide Web Consortium W3C: The World Wide Web is the universe of
network-accessible information, an embodiment of human knowledge.

It is a system of documents that can be retrieved and viewed by anyone anywhere in the
world who has access to the Internet.

In simple terms, The World Wide Web is a way of exchanging information between computers
on the Internet, tying them together into a vast collection of interactive multimedia resources.

What is HTTP?

HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to transfer
hypertext documents that makes the World Wide Web possible.

1
A standard web address such as http://www.yahoo.com is called a URL and here the prefix
http indicates its protocol

What is URL?

URL stands for Uniform Resource Locator, and is used to specify addresses on the World
Wide Web. A URL is the fundamental network identification for any resource connected to
the web e. g. , hypertextpages, images, and sound files.
A typical URL looks like this:
http://www.zdpress.com/webworks/index.html/
A URL will have the following format −protocol://hostname/other_information

The protocol specifies how information is transferred from a link. The protocol used for web
resources is HyperText Transfer Protocol HTTP . Other protocols compatible with most
web browsers include FTP, telnet, newsgroups, and Gopher.
The protocol is followed by a colon, two slashes, and then the domain name. The domain name
is the computer on which the resource is located.
Links to particular files or subdirectories may be further specified after the domain name. The
directory names are separated by single forward slashes.
What is Website?

A Website of various pages written in HTML markup language. This is a location on the web
where people can find information about the specific things the website is meant for e.g about a
company, a University, a family or even an individualThere are millions of websites available on
the web.
Each page available on the website is called a web page and first page of any website is
called home page for that site.
What is Web Server?

Every Website sits on a computer known as a Web server. This server is always connected to
the internet. Every Web server that is connected to the Internet is given a unique address made
up of a series of four numbers between 0 and 256 separated by periods. For example,
68.178.157.132 or 68.122.35.127.

When you register a Web address, also known as a domain name, such as tutorialspoint.com
you have to specify the IP address of the Web server that will host the site.
We will see different type of Web servers in a separate chapter.
What is Web Browser?

A Web Browser is used to request data from the Web while surfing. It is fulfilled by the server
and sent to your computer (the client). To access the Web you need a web browser, such as
Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox.
On the Web, when you navigate through pages of information this is commonly known as
browsing or surfing.

2
What is SMTP Server?

SMTP stands for Simple Mail Transfer Protocol Server. This server takes care of delivering
emails from one server to another server. When you send an email to an email address, it is
delivered to its recipient by a SMTP Server.
What is ISP?

ISP stands for Internet Service Provider. They are the companies who provide you service in
terms of internet connection to connect to the internet.
You will buy space on a Web Server from any Internet Service Provider. This space will be used
to host your Website.
What is HTML?

HTML stands for Hyper Text Markup Language. This is the language in which we write web
pages for any Website. Even the page you are reading right now is written in HTML.
This is a subset of Standard Generalized Mark-Up Language SGML for electronic publishing,
the specific standard used for the World Wide Web.

What is Hyperlink?
A hyperlink or simply a link is a selectable element in an electronic document that serves as an
access point to other electronic resources. Typically, you click the hyperlink to access the linked
resource. Familiar hyperlinks include buttons, icons, image maps, and clickable text links.
What is DNS?

DNS stands for Domain Name System. When someone types in your domain name,
www.example.com, your browser will ask the Domain Name System to find the IP that hosts your
site. When you register your domain name, your IP address should be put in a DNS along with
your domain name. Without doing it your domain name will not be functioning properly.
What is W3C?

W3C stands for World Wide Web Consortium which is an international consortium of companies
involved with the Internet and the Web.
The W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide
Web. The organization's purpose is to develop open standards so that the Web evolves in a
single direction rather than being splintered among competing factions. The W3C is the chief
standards body for HTTP and HTML.

3
 2. WEB - HOW IT WORKS

On the simplest level, the Web physically consists of the following components −

Your personal computer − This is the PC at which you sit to see the web.

A Web browser − A software installed on your PC which helps you to browse the Web.

An internet connection − This is provided by an ISP and connects you to the internet to
reach to any Website.
A Web server − This is the computer on which a website is hosted.

Routers & Switches − They are the combination of software and hardware who take your
request and pass to appropriate Web server.
The Web is known as a client-server system. Your computer is the client and the remote
computers that store electronic files are the servers.
How the Web Works

When you enter something like http://www.google.com, the request goes to one of many special
computers on the Internet known as Domain Name Servers DNS. All these requests are routed
through various routers and switches. The domain name servers keep tables of machine names
and their IP addresses, so when you type in http://www.google.com, it gets translated into a
number, which identifies the computers that serve the Google Website to you.

When you want to view any page on the Web, you must initiate the activity by requesting a
page using your browser. The browser asks a domain name server to translate the domain
name you requested into an IP address. The browser then sends a request to that server for
the page you want, using a standard called Hypertext Transfer Protocol or HTTP.
The server should constantly be connected to the Internet, ready to serve pages to visitors. When
it receives a request, it looks for the requested document and returns it to the Web browser. When
a request is made, the server usually logs the client's IP address, the document requested, and the
date and time it was requested. This information varies from server to server.
An average Web page actually requires the Web browser to request more than one file from the
Web server and not just the HTML / XHTML page, but also any images, style sheets, and other
resources used in the web page. Each of these files including the main page needs a URL to
identify each item. Then each item is sent by the Web server to the Web browser and Web
browser collects all this information and displays them in the form of Web page.
In short, we have seen how a Web client - server interaction happens. We can summarize
these steps as follows −

A user enters a URL into a browser (for example, http://www.google.com. This request is passed
to a domain name server.
The domain name server returns an IP address for the server that hosts the
Website for example, 68.178.157.132.
The browser requests the page from the Web server using the IP address specified by the
domain name server.
The Web server returns the page to the IP address specified by the browser requesting the
page. The page may also contain links to other files on the same server, such as images, which

4
the browser will also request. The browser collects all the information and displays to your
computer in the form of a web page.

3. WEB BROWSER TYPES

A Web Browser is used to request data from the Web while surfing. Web Browsers are software
installed on your PC. To access the Web, you need a web browser, such as Netscape Navigator,
Microsoft Internet Explorer or Mozilla Firefox.
On the Web, when you navigate through pages of information, this is commonly known as web
browsing or web surfing.
There are four leading web browsers − Explorer, Firefox, Netscape, and Safari, but there are
many others browsers available. You might be interested in knowing Complete Browser Statistics.
Now we will see these browsers in bit more detail.
While developing a site, we should try to make it compatible to as many browsers as possible.
Especially sites should be compatible to major browsers like Explorer, Firefox, Chrome,
Netscape, Opera, and Safari.

Internet Explorer
Internet Explorer IE is a product from software giant Microsoft. This is the most commonly
used browser in the universe. This was introduced in 1995 along with Windows 95 launch and it
has passed Netscape popularity in 1998.

Google Chrome
This web browser is developed by Google and its beta version was first released on
September 2, 2008 for Microsoft Windows. Today, chrome is known to be one of the most
popular web browser with its global share of more than 50%.

Mozilla Firefox
Firefox is a new browser derived from Mozilla. It was released in 2004 and has grown to
be the second most popular browser on the Internet.

Safari
Safari is a web browser developed by Apple Inc. and included in Mac OS X. It was first
released as a public beta in January 2003. Safari has very good support for latest technologies
like XHTML, CSS2 etc.

Opera
Opera is smaller and faster than most other browsers, yet it is full- featured. Fast, user-
friendly, with keyboard interface, multiple windows, zoom functions, and more. Java and non
Java-enabled versions available. Ideal for newcomers to the Internet, school children, handicap
and as a front-end for CD-Rom and kiosks.

Konqueror
Konqueror is an Open Source web browser with HTML 4.01 compliance, supporting
Java applets, JavaScript, CSS 1, CSS 2.1, as well as Netscape plugins. This works as a file
manager as well as it supports basic file management on local UNIX filesystems, from simple
cut/copy and paste operations to advanced remote and local network file browsing.

Lynx
Lynx is a fully-featured World Wide Web browser for users on Unix, VMS, and other
platforms running cursor -addressable, character-cell terminals or emulators.

5
 4. WEB SERVER TYPES
Every Website sits on a computer known as a Web server. This server is always connected to
the internet. Every Web server that is connected to the Internet is given a unique address made
up of a series of four numbers between 0 and 255 separated by periods. For example,
68.178.157.132 or 68.122.35.127.

When you register a web address, also known as a domain name, such as tutorialspoint.com
you have to specify the IP address of the Web server that will host the site. You can load up with
Dedicated Servers that can support your web-based operations.
There are four leading web servers − Apache, IIS, lighttpd and Jagsaw. Now we will see
these servers in bit more detail. Apart from these Web Servers, there are other Web
Servers also available in the market but they are very expensive. Major ones are Netscape's
iPlanet, Bea's Web Logic and IBM's WebSphere.

Apache HTTP Server

This is the most popular web server in the world developed by the Apache Software Foundation.
Apache web server is an open source software and can be installed on almost all operating systems
including Linux, Unix, Windows, FreeBSD, Mac OS X and more. About 60% of the web server
machines run the Apache Web Server.

Internet Information Services

The Internet Information Server IIS is a high performance Web Server from Microsoft. This
web server runs on Windows NT/2000 and 2003 platforms and may be on upcoming new
Windows version also. IIS comes bundled with Windows NT/2000 and 2003; Because IIS is tightly
integrated with the operating system so it is relatively easy to administer it.

lighttpd

The lighttpd, pronounced lighty is also a free web server that is distributed with the
FreeBSD operating system. This open source web server is fast, secure and consumes much
less CPU power. Lighttpd can also run on Windows, Mac OS X, Linux and Solaris operating
systems.

Sun Java System Web Server

This web server from Sun Microsystems is suited for medium and large websites. Though
the server is free it is not open source. It however, runs on Windows, Linux and Unix platforms.
The Sun Java System web server supports various languages, scripts and technologies required
for Web 2.0 such as JSP, Java Servlets, PHP, Perl, Python, Ruby on Rails, ASP and Coldfusion
etc.
Jigsaw Server

Jigsaw W3C′sServer comes from the World Wide Web Consortium. It is open source and
free and can run on various platforms like Linux, Unix, Windows, Mac OS X Free BSD etc.
Jigsaw has been written in Java and can run CGI scripts and PHP programs.

6
 5. WEBSITE ADVANTAGES
Anyone who is interested in constructing a website has to be aware of its advantages as well.
The following are a list of a few major advantages of keeping a website:
a) Business is Open 24x7

This means that once you put your business onsite, then your business is open 7 days a week
and 365 days a year. Even if you are in different locations of the world then you will be able to
serve your customers on 24x7 hours basis.
b) Increased Customer Base

Because anyone in the world can see your website so you will gain customers from other
states and countries while you are putting in the same amount of effort and money.
c) Tremendous Cost Saving

This is one of the biggest advantages of having a business online. You do not need to keep a big
man power and lot of resources to maintain a business on site. There are many other cost
saving opportunities while keeping business online. Think of how many cards you mail out to let
customers know about your sale. All of that can be eliminated by putting the sale information on
your website and inviting your customers to visit it.

d) Advertising Opportunities

Apart from saving your advertising cost, you have additional opportunities to run advertisements
from other companies and start making money. If you ever advertised in a local newspaper, you
know the costs. You are being charged per line, per inch, and per colour. On the Web, there is
no limit to how much you can put. So whenever there is a new product or service, then you can
advertise it in a better way.

e) Creates a Brand Image

Internet is a great medium through which you can create any image of yourself which you want. It
is all in your hands. For example, you can design a professional website, add helpful content, and
your company will immediately take a step up in the image it represents. No matter how small
your business is, with the right tools and a great desire you can make it look like a corporation on
the Web.

f) Customer Satisfaction

If you have a really good site online, then you can give your customers a lot of satisfaction in terms
of customer care. You can keep online help, Frequently Asked Questions (FAQ), and other
important information which is useful for your customers. You can create online forums for open
discussion and you can conduct customer survey to take customer feedback etc.
g) Showcase Your Work

Whether you are a real estate agent, construction business owner or a beauty salon specialist −
you can put your work on display when you have a website. Anytime a potential client wants to
see your past work and projects, simply refer him or her to your site. No need to scan and mail
pictures, or bring your client to a finished building project.

7
 6. WEB – SKILLS REQUIRED

If you are planning to maintain a Website, then you would require a specific set of skills. This
skillset can be endless because today, there are numerous technologies available and many are
coming everyday. So you have to plan and affirm on any one of the available technologies and go
ahead with your project.

It is not required that you have knowledge of all the listed skills. If you want to develop a simple
Website, then you would need just first four skills listed here. The rest of the skills are required if
you want to go for a bigger and more interactive Website.
Computer Operations − All you need to know is how to operate a computer − Windows, Linux or
Macintosh. This depends on which Web Server you want to host your website. So you should have
basic knowledge of that system only. You should be well acquainted of basic operations like
creating file, deleting file, updating file, directory creation, file permission etc.
Remote Access − Most of the times your Web Server will be accessed from remote site only.
You should be well aware how to connect a computer from remote site. So at least you should
have basic knowledge of telnet utility to connect to a remote machine. There are many service
providers who will provide you control panel to manage your Website.
File Uploading & Downloading − As I told you most of the times your Web Server will be on
remote site. So you would need to upload and download all the files related to your Website. So
at least you should have basic knowledge of FTP utility to connect to a remote machine and
download or upload your files. Almost service providers give you facility to upload your files on
your Web server.

HTML / XHTML Knowledge − These are the markup languages which you will use to build your
website. So you should have good understanding on these languages.
CSS Knowledge − Cascading Style Sheet knowledge is required to achieve many results
which are not possible through HTML or XHTML.
PHP Script − Now-a-days many sites are being developed using PHP language. This script
helps you to create an interactive Website.
PERL Script − PERL is another language which is being highly used to develop interactive Web
Applications.
Java or VB Scripts − These scripts are required to perform user level validations and to add more
interactivity in your Website. So a web developer is desired to have knowledge of any of the client
side scripts.
AJAX Technology − This is the latest technology in the web. Google and Yahoo are using this
technology to give a better browsing experience to their site visitors.
ASP or JSP − These are other technologies to be used to develop interactive Websites.

Flash Knowledge − You can plan to use Macromedia Flash to build your Website. This is a bit
time consuming to learn this technology but once you learnt then you can develop very beautiful
and attractive websites using Flash.
HTTP Protocol − As you grow you are desired to have more knowledge about Web. So I would
suggest you to go through the web backbone i.e. HTTP protocol as well.

8
 7. WEB -- TOOLS REQUIIRED
As a basic necessity, you need a good internet connection from a reliable service provider which
provides decent connectivity and speed.
The following tools and infrastructure will help you in developing a Website −

Computer Machine – You need to have a computer machine available running either Windows or
Linux or UNIX or Macintosh system or any other operating system.
Internet Connection – The second and another important tool you would need is to connect to
the Internet. For this purpose, you can buy either a dial up connection or broadband connection
of high speed connectivity based on your requirement and budget.
A Web Server − Apart from basic Internet connectivity you will need one Web Server to keep all
the files related to your Website. So you would need to buy space on a Web Server. There are
millions of ISPs who are in business of selling web space at competitive prices.
A Text Editor − This is another important tool which you will need to develop your Website. If you
are using Windows then you can use notepad as a text editor, or if you are using Linux/Unix then
you can choose to use vi editor. You will need this editor to write your HTML, PHP or ASP pages
or for any other editing purpose.
A Web Browser − You will need this tool to see the result of your HTML file. So you should
have either Internet Explorer or Firefox etc. installed on your computer.
Web Authoring Tools − If you don't want to use a simple Text Editor to edit your HTML files then
there are many commercial Web Authoring Tools available. These tools are also called HTML
editors. Microsoft's FrontPage and Macromedia Dreamweaver are both a visual HTML WYSIWYG
and HTML source code editor. These editors help you to develop your HTML pages very rapidly.

Secure telnet client − If you are connecting to your Web server directly then you can use a tool
called Putty.

Secure FTP client − If you are connecting to your Web server directly using FTP client to upload
or download your web files then you can use a tool called PSFTP. FTP stands for File Transfer
Protocol. Simply put, after you design your website, you need to send it to the Web and your FTP
program will do just that for you. This is what I'm using while connecting to my web server.

9
 8. WEB -- DOMAIN NAMES
A domain name is the part of your Internet address that comes after "www". For example,
for FUTA, the domain name is futa.edu.ng.
A domain name becomes your Business Address so care should be taken to select a
domain name. Your domain name should be easy to remember and easy to type.
How to Get a Domain Name?

When you plan to put a site online, this is one of the important steps to buy a domain name. This
is always not necessary that whatever domain name you are looking that is available so in that
case you will have to opt for any other good domain name.
When you buy a domain name it is registered and when domain names are registered, they are
added to a large domain name register, and information about your site − including your Internet
IP address is stored on a DNS server and your contact information etc. is registered with your
registrar.

You can buy domain name from any domain registrar like GoDaddy

Domain Extension Types

There are many types of domain extensions you can choose for your domain name. This
depends on your business nature.
For example, if you are going to register a domain name for education purpose then you can
choose .edu extension.
Below is a reference of the correct usage of certain extensions. But there is no hard and fast rule
to go for any extension. Most commonly used is .com
.com − Stands for company/commercial, but it can be used for any website.

.net − Stands for network and is usually used for a network of sites.

.org − Stands for organization and is supposed to be for non-profit bodies.

.us, .in − They are based on your country names so that you can go for country specific
domain extensions
.biz − A newer extension on the Internet and can be used to indicate that this site is purely
related to business.
.info − Stands for information. This domain name extension can be very useful, and as a new
comer it's doing well.
.tv − Stands for Television and are more appropriate for TV channel sites.
Others are .gov, .mil etc

Newer domain extensions such as .biz .info and .us have more name choices available as
many of the popular domains have yet to be taken and most of them are available at very
nominal prices.

10
Choosing a Domain Name
The domain name will be your business address. Hence, it is imperative that you choose
the domain name with utmost care.
Many people think it is important to have keywords in a domain. Keywords in the domain name are
usually important, but it usually can be done while keeping the domain name short, memorable,
and free of hyphens.
Using keywords in your domain name gives you a strong competitive advantage over your
competitors. Having your keywords in your domain name can increase click through rates on
search engine listings and paid ads as well as make it easier to using your keywords in get
keyword rich descriptive inbound links.
Avoid buying long and confusing domain names. May people separate the words in their domain
names using dashes or hyphen. In the past the domain name itself was a significant ranking factor
but now with advanced search engines, it is not a significant factor anymore.
Keep two to three words in your domain name − it will be more memorable. Some of the most
memorable websites do a great job of branding by creating their own words. Examples include
eBay, Yahoo!, Expedia, Slashdot, Fark, Wikipedia, Google...
You should be able to say it over the telephone once and the other person should know how to
spell it and they should know what you sell. If you can do that AND work keywords in there,
good for you. If you can't, skip the keywords.
What are Sub-Domains

You can divide your domain into many sub domains based on your requirement. If you are doing
multiple business using the same domain, then it would be useful to have sub-domains for every
business. Following are examples of some sub-domains −
You must have seen google.com as a main domain but google has created many
subdomains based on their business. Some of them are as follows −
➢ adwords.google.com − This sub domain is being used for Google Adwords.

➢ groups.google.com − This sub domain is being used for Google Groups.

➢ images.google.com − This sub domain is being used for Google Images.

This way, you can present your different business sections in a very good segregated way. It is
not a big thing to create a sub -domains. If you already have registered a domain, then your
registrar will provide you a way to create sub-domains. You may need to talk to your registrar for
more detail.

11
 9. WEBSITE CONSTRUCTION

In order to construct a good website, there are many factors to taken into consideration.

What to Put on Your Website?

What you would have on your website totally depends on your business and the nature of
your website. Here is a list of pages that you might want to create for your website.
➢ Attractive Home Page: Always required for every website.
➢ List of Product and Services along with complete detail.
➢ Complete Pricing Information.
➢ About your company and nature of business including your achievements.
➢ About your staff and if possible their experience.
➢ Your complete contact information.
➢ Frequently Asked Questions.
➢ Success Stories and Feedback from Customers.

Finally, make your site useful and interesting for your customers. Your site visitors are your
customers and they should find each and everything they are looking for. Customer satisfaction
should be your prime concern.
How to Design Your Website?

You should not simply start developing your website, otherwise you will end up with a bogus
website. First, you should put a complete plan and your design in place.

Below are a few points which can help you to design a better website −

➢ Consider what technology you are going to use to develop your website. Adopt one
which gives you better flexibility and rapid development opportunities and then design it
accordingly.
➢ Design a generic framework so that in future you can enhance and modify your website
by putting minimal effort.
➢ Design a site to keep required performance in mind. If you are designing database
driven website then lot of effort has to put to design good database schemas.
➢ Keep your design as simple as possible so that any new developer should become
familiar with your design as soon as possible.
➢ Identify repeatable components of your website and then keep them separate and try to
use them wherever possible.
➢ Identify the nature and qualification of your site visitors and give importance to look and
feel accordingly.

12
 ➢ Think from the perspective of a site visitor. If you were a visitor, then how would you like
to see this website? If the same site belongs to somebody else, then would you like to
spend some time on such site?
➢ You should create a search engine friendly website.

Once again, your presentation should be unique and attractive, otherwise there are a lot of
websites available on the Internet and it will be difficult for you to retain a site visitor for more than
a minute.
How to Make a Website Interactive?

Many statistics show that if you are able to retain your site visitors for a long time, then they do
bigger shopping and visit the site again and again.
So make sure you have created some things to engage your site visitors on your website.
Offering a lot of quality information can serve as a great magnet for visitors.
Here is a list of some interactive tools that you can add to your website without any programming
skills or incurring any costs −
➢ Poll
➢ Forum
➢ Guest book
➢ Chat room
➢ Greeting cards
➢ Tell-a-friend about this site
➢ Feedback form
➢ Live customer service
➢ Daily joke or daily cartoon
➢ Daily news headlines
➢ Site Search Engine
➢ Mailing List
➢ Automated Frequently Asked Questions
The list can go on and on, depending on what will attract your type of visitors.
How to Code Your Website?

Finally, when you start coding for your website, you should be well aware of the following tips for a
better website −
➢ Your site should meet all the quality requirements defined by W3C—
➢ (Assignment: Find out about these requirements)
➢ You use Hypertext Markup Language (HTML) or XTML (Extensible Markup
Language) to develop your website.

13
 XHTML is almost identical to HTML. Only that XHTML is stricter than HTML. XHTML is
HTML defined as an XML application. XHTML is supported by all major browsers. XML is a
markup language where documents must be marked up correctly (be "well-formed").
XHTML was developed by combining the strengths of HTML and XML.

➢ You can validate your source code using W3C Validator

➢ Do use appropriate comments but avoid using too many comments inside HTML files.

➢ Keep your style sheets and JAVA or VB scripts into separate files and then include
them where ever is required.
➢ Do not use too much graphics in your web pages.

➢ Keep your web pages static except as much as possible except when they have to be
generated dynamically.

➢ Make sure there is no broken link on any web page.

➢ Test your developed web page in major browsers like Internet Explorer, Firefox,
Mozilla, Netscape, etc.
➢ Test your all the scripts for all the possible scenarios. Do not host any page without
complete testing.

How to Create a Search Engine Friendly Website?

It is very important to make your website search friendly, otherwise you will be away from a large
chunk of your customer base which comes from search engines like google and yahoo. Search
Engine Optimization (SEO) is a concept that is very important for websites that want to ensure that
traffic increase to their sites.

Search Engines are the librarians of the Internet. They collect information from the documents
residing on different locations on the web to provide responses to requests of users. Each of
these search engines has a recipe called algorithms that it uses to address requests. So search
engine optimization has to do with providing higher ranking for websites when searches are
conducted by people.

In order to ensure this, there are some things these algorithms put into consideration as follows:

➢ Accounting for every Word on the Web

➢ Paying attention to Titles
➢ Considering Links between Websites
➢ Recognizing Words used in links
➢ Reputation – of sites, i.e the ones with fresh engaging contents.

Securing Your Source Code Frequently

While developing your website, it is very important to keep a backup of your complete source
code. Many times, you might accidentally delete a file. If you have a backup, then you can restore
previous files and start doing your work. It is a good practice to take backup on an hourly basis
or at least on a daily basis. Keep this backup on a different machine or media.

14
 10. WEB – HOSTING CONCEPTS
Web hosting deals with putting the contents of a website on a Web server. A website owner might
typically host his website on his own server as an option. But this will become very much
expensive unless he is hosting a site like yahoo.com or google.com.

Buying a server space or renting a complete server from an Internet Service Provider ISP is the
most widely used option. This section presents how to choose a hosting type and other related
concepts.

Hosting Platforms

The two most widely used hosting platforms are:−

a) Windows Hosting Servers − Windows users will find many hosting servers running
different flavours of Windows and they can buy space from these servers. Normally
Windows hosting servers are more expensive because of lot of software licensing costs
are involved with these servers.
b) Linux Hosting Servers – Going for a Linux hosting server provides unlimited
opportunities and less cost than Windows hosting server. There are many ISPs who
provide Hosting Servers with different flavours of Unix.
Hosting Types

There are many options available and users can select any hosting type based on their
requirement and budget. The following are the most widely used hosting types −
a) Free Hosting

There are many service providers who will give users free space on their web server with a
condition that they will allow them to run their advertisement on their web pages. Then such
users may agree with this and pay nothing for a space. There are some websites like
geocities.com, lycos.com, myspace.com, etc. that give people space to build their web pages.
b) Shared Hosting

With shared hosting, each website is hosted on a powerful server along with other websites. On
a shared host, each of the available websites has its own user ID and password to login to the
shared host and is allowed to work in its work area. It will not be able to touch any file or
directory belonging to other host partners. Information about how many sites are hosted on a
shared host will not even be available to the partner website sharing the host. This type of
hosting is very cost effective and good for small websites where space and speed are not very
important. Here traffic on one site will affect the speed of all other hosted sites.

c) Virtual Dedicated Hosting

This type of hosting is better for a medium size business. With virtual dedicated hosting, each
site will have a dedicated bandwidth and dedicated RAM, and be given a root ID and password
to maintain its Web server. The website will be the complete owner of the virtual dedicated
server and will be able to install or de-install any software. This type of hosting is created on a
single server, but it is managed in such a way that every user will have dedicated speed and
bandwidth. This is bit more expensive but really good one for medium size business.

15
 d) Dedicated Hosting

This type of hosting is very similar to virtual dedicated hosting, but here, a complete machine will
be allotted for the website. They are more expensive than virtual dedicated hosting and should
be considered when there is a very high traffic requirement.

e) Collocated Hosting

It is very difficult to set dedicated resources such as high-security against fire and vandalism,
regulated backup power, dedicated Internet connections and more. Collocation is the option which
allows you to put your machine in a service provider's premises to utilize all the available facilities.
This is also a very expensive option and should be opted when you have very high traffic
requirement.

Hosting Components

When buying a Web server space, there are some factors to be put into considerations. These
are listed as follows:
a) Disk Space

A small or medium website will require between 10 and 100MB of disk space. So, a website that
plans to keep a lot of audio and video on the site, should plan to buy more space. Before buying
server space, it is important to check the options available to expand disk space in case it is
needed in future.

b) Monthly Traffic

A small or medium website will need between 1GB and 10GB of data transfer on a monthly basis.
If it plans to keep a lot of audio and video on your website, then it needs a plan with more data
transfer capacity. It needs to check different options based on its requirements. It also needs to
confirm what other options are available in case it crosses the given data transfer limit, so that the
site is not be stopped in case it exceeds the given limit.

c) Processing Speed

A client buying space on a shared machine cannot guess how much speed will be given to him. In
that case, the only way is to see other hosted sites with the same service provider to know about
their hosting quality. But if he is buying virtual dedicated server or dedicated server, then he should
consider how much RAM is being allocated to him. The pricing will depend on the given
processing power to the client.

d) Connection Speed

Nowadays, most service providers allow very fast connection speed. So the client needs to
choose a service provider who is giving better connection speed in terms of bits per second. The
connection speed can range from 64Kb per second to 2.488Gb per second.
e) Email Accounts

16
The client should make sure he is going to get sufficient number of e-mail accounts. There are
many other options available which come along with the e-mail account. These include: IMAP,
POP and E-mail Forwarding options.

f) Emailing Support

Apart from having email accounts, it is also very important that the web server should have a
facility to send emails from back-end. In case the site visitors want to contact the organization
using a form, then they will be able to use that emailing facility to send emails to the organizations’
designated account. In simple terms, it is necessary to make sure that the SMTP Server is set up
and working on the organization’s Web server.

g) Latest Technologies

It is necessary to ensure that your web server is equipped with all the latest technologies. It
should have the latest version support for PHP, PERL, ASP and JAVA, etc.

h) Databases
There are many database management software available. These include: MySQL, Oracle, SQL
Server, etc. The server should be chosen based on the database requirement. If you are buying
space on a shared server, then you need to verify how much space will be allocated for your
database. Many ISPs do not give more than a limited space for databases. If your site needs a lot
of database size, then you should go for a virtual dedicated server.
i)Server Uptime

It is important that a website buys a web server from a reliable and reputed ISP. It should make
sure the ISP is giving it 99.99% server uptime. If the server is down, then there are many service
providers who gives compensation in case the website goes down more than a limited number of
time.
j) Backup & FTP

It is important to ensure that the Service Provider is giving more ways of taking regular backup of
the client’s website. If your site is changing everyday, then it becomes very important that you
should take regular backup of your website. Many service providers do it on behalf of the client
charging a small cost for this service.

k) Control Panel

The client needs to check up with the service provider to be sure of what type of facilities will be
provided to maintain his hosting account. He needs to check if the service provider is providing
him an easy-to-use Control Panel or some other similar tool. Using a Control Panel, you should
be able to maintain basic operations related to your website such as logging your service
request, your reboot request, or any other problem.
l) Customer Support

Before finalizing a deal with the service provider, the client needs to make sure the service
provider provides the required support. There are many service providers who give you 24x7
support for any technical or non-technical problem.

17
18
 11. WEB -- ECOMMERCE HOSTING

Ecommerce is a way of doing business through the Internet. It especially involves selling
products or services through the Internet. So someone planning to put up a website which will
have transactions such as buying or selling items or services, will need to setup an ecommerce
website.

Ecommerce hosting is a bit expensive. Nevertheless, the first step is to start an ecommerce
website. Nowadays, it is very easy to set up an ecommerce site. All that one needs to do is to get
in touch with any good service provider and start gathering basic information.

There are many service providers who help people to set up virtual stores and charge
unexpectedly very low. Google has also started google account service in which you can sell
your products.

While finalizing ecommerce hosting setup, it should be clear how the following will be handled:

➢ Customer Registrations
➢ Customer Transactions
➢ Product Catalogs
➢ Customer Orders
➢ Order Security
➢ Server Security
➢ Server Maintenance
➢ Server Backup
➢ Server downtime
➢ Inventory Control
➢ Shipment Methods
➢ Payment Methods
➢ Foreign currency
➢ Credit Cards
➢ Taxes issues

The ecommerce store has to take this list and discuss it with its service provider as well to
understand how they will support to handle all these items.

19
 12. WEB - SITE BACKUP

There are some uncertainties that could occur with website and server information, devices on
which they reside or humans dealing with these. For instance, a server's hard drive could crash; a
site can be hacked, while the hacker deletes all the files; a web host may disappear with the
client’s money and data. Worse still, there could be an earth quake and the ISP building is gone
down and everything is lost. Nobody should face such a situation, but these are eventualities that
should be prepared for. Therefore, it is of utmost importance that you keep regular backups of
your data.

Backup is the process of keeping a copy of data elsewhere so that it may be used to restore the
original after a data loss event. The copy kept is also referred to as backup.

Now there are many questions −

➢ How frequently backup should be taken?

➢ Where this backup should be preserved?
➢ What type of backup should be taken?
➢ Who should carry out these backups?

These questions are answered as follows:

How Frequently Backup Should be Taken?

For a site that is not changing over a period of time, it is advisable to take backups only once and
keep it on a hard disk, DVD or any other storage device.
The case is different for a site with the habit of making frequent modifications; then it is
necessary that it does regular backup. Websites like amazon.com have very tight backup
schedules and very expensive backup infrastructure.
So the frequency or the schedule of backup depends on your business and you have to see how
much data loss you can bear. A company that feels it is not affordable to lose even a single day’s
data, would require to schedule daily backup and similarly, others can decide if weekly or monthly
backup are OK for them or not.

Where the Backup Should be Preserved?

Most of the times, backups are taken from one machine and saved on another machine or media.
If possible, a different backup server where you can FTP your complete data for backup may be
necessary. If this is not too much then data CD or DVD could be used.
If possible, keep multiple copies of backup but with a managed way to avoid any confusion. You
should have a proper version control over different backups. There are many service providers
who provide different backup servers with a very nominal cost and it is recommended that clients
pay for such backup services.

What Type of Backup Should be Taken?

20
There are two types of backup − incremental and full. It depends on what type of backup tools
are being used. There are many backup tools − for example, Oracle provides its own utilities to
take different types of backup.

Incremental Backup − The backup’s controller compares the existing backup with the data
that you wish to backup. If there is an exact match between the two, then no additional files
will be backed up. However, if you have added or edited any file, these files will be updated
in the backup, thus the name incremental.
Full Backup − Here all files are written to the backup, even if they already exist in the most
current backup.

Who Should Carry out these Backup?

The simplest case is that you can login to your web server on a monthly or weekly basis and copy
all the website related files on different computer or media. It works only in case you have limited
amount of data on your site.

If you have a huge database and numerous files, then it is difficult to manage such backups on an
everyday and weekly basis. In such cases, you may need to have automated scripts to do backup
and keep them on another machine or media.

You can write your shell script or perl script and browse through different directories and collect all
the files and zip them automatically, assign them a unique backup number and then ftp those files
on a designated backup server or media like tap drive.

21
 13. WEB -SITE STATISTICS

Once ther site is up and running, it is important that the website owner tracks his visitors and
analyze what they are using. Detailed information on the following are important:−
Who is your visitor? − You should have each site visitor’s IP address available with you to
know the geographical location and identity of that visitor.
Visitors’ Timestamp − You should be aware of the time when your site gets the highest number
of visitors so that you can plan a server down easily. Secondly, timestamp and IP address will
help you identify your site visitors in case an investigation is required against a site visitor.

What the visitors prefer? − What pages did the site visitor view on your website will give you an
idea about the importance of various sections of your website.
How visitors came? − This is another important information you should be aware of. How are
you getting your site visitors? Are they coming directly or coming through some other website or
advertising programme?
How long do they stay? − How much time a visitor spends on your site? If visitors are
leaving your site just after browsing 1 or 2 pages, then you should come up with some
innovative ways to retain them for a longer duration.
Visitors’ Browser − This information is important to improve your website for that type of web
browsers.
Statistics Programs

There are many websites that help you to find out all the information discussed in the previous
section. You just need to keep a small piece of code in the <head<....</head> section of your web
pages and you will have not only all the above mentioned information but also a complete analysis
of your site.

Googles Analytics Program helps to capture your website statistics.

Another good program is Webalizer. This will give you all the basic site statistics you need.

There is a site from sourceforge, AWStats which gives you opportunity to collect your website
statistics.

Site Statistics Terminology

The following are some important site statistics terms:-

Unique Visits − The number of unique visitors you had in a given time period. Example − if there
was only a single person who visited your website, and visited 1,000 separate times in a day, the
unique visits would just be one. The uniqueness is counted based on the IP address of the visitor.

Total Visits − The total number of visits including duplicate visits that a website receives in a given
time period. Each time a site visitor reaches your site, it is counted as one visit.
Page Views or Page Impressions − Each time a web page is loaded, it is referred to as a page
view. If you are counting a website link available on this page, then it will be counted as a page
impression.

22
Hits − Hits are very similar to page views and will be counted every time a visitor clicks any link
related to your website.
Direct Access − It refers to the people who accessed your website through their bookmarks or
typed in your URL manually in the URL box of the browser.

Referrer & Referral URL − The web address where the visitor followed a link to reach your website.
For example, if someone finds your website in google search and clicks over the link to reach your
site, then google will be the referrer.

23
24
 14. WEB -SITE POPULARITY

A website was designed, implemented and finally hosted. The success of that site
depends on how many site visitors know about this site address and the services it
offers. If you want to make your site a success, then the actual work starts after
hosting your website successfully. It includes the following actions, but gaining
popularity is certainly not limited to these actions.

Search Engine Inclusion − First step, you should go and include your
website in various search engines like google, yahoo, and msn. Never trust
automated software to include your site in search engines. There are many
fraud companies in this business, so stay away from them and don't waste
your money.

Open directory inclusion − This is another way to make your site popular.
There are many open directory projects like dmoz.com and yahoo.com where
you can include your website to get attention from net surfers.
Google AdWords − This is a paid program from google where you can
register and you can pay based on the number of clicks on your website link or
based on the number of page impressions.

Advertising Programs − If you have a big budget, then you can go for
higher resources like TV ads or Newspaper or magazine advertising
programs. They are most effective and expensive as well.

Whitepapers and Article − If you write whitepapers or articles, then you can
include your website link in those whitepapers or articles to get more traffic
on your site.
Site Link Exchange − There are many sites including tutorialspoint.com that
do site link exchange. What it means is − You will keep the link of another
website on your site and the other site will keep yours. This is for the mutual
benefit of the site link exchangers.

25
HTML , CSS and JavaScript
15. Brief Introduction to HTML

1. Introduction
Hypertext Markup Language (HTML) is one of the three main components of modern
webpages, along with Cascading Style Sheets (CSS) and JavaScript. HTML indicates to
the browser what elements should be included in the webpage (and in what order). CSS
indicates how each element should be styled. JavaScript provides a means for webpage
authors to manipulate these elements programmatically and in response to actions by the
end user.

A document written in a markup language like HTML has parts that get rendered in the
eventual output, but also parts that inform the rendering software how to interpret the
remaining text. ‘Rendering’ here refers to the process of transforming the text document
containing the HTML text into e.g. its visual representation on a screen.

The markup used by HTML includes tags, like <p>…</p>, to demarcate different HTML
elements within the same webpage. In this case the <p> tag opens the relevant element
and the </p> closes it. <p> elements are typically used to delimit paragraphs in HTML.
HTML elements can be nested within other elements. Most elements can also be qualified
by a range of attributes. For example, if we want to make the text within a <p> element
appear red we can ascribe it a CSS style, along the lines of <p style="color:red;">.

2. Getting started with HTML

As explained in HTML and other markup languages, there are various ‘dialects’ of HTML.
This means that some examples of HTML may be understood by some browsers but
rejected by others.

Strictly speaking, an HTML document starts with a document type declaration, along the
lines of e.g. <!DOCTYPE html> and a header along the lines of e.g.
<head><title>Document title</title></head>. Below is a page created with HTML. A
comment is added into the document, using HTML comment tags (<!-- -->). Comments are
not displayed by the browser but can help to document the HTML source text.

<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<!-- Only the text in the body will appear in the browser --> <body>
Hello World (Using HTML)
</body>
</html>

Often, the <html> element also includes a lang attribute, as this can be important for
accessibility applications (such as screen readers) and for search engines. With the lang
attribute, the first two letters specify the language. If the language comes in various dialects
then two more letters specify the dialect, e.g.:

26
<html lang="en-US">

3. Carriage returns and thematic break lines

HTML markup largely ignores carriage returns (i.e. line breaks) within marked up files. This
means that browsers do not render carriage returns as line breaks as such (except if certain
styles apply to the element within which they appear, as in the default formatting of the
<pre> element for example). Iso, if you want to insert a carriage return you need to insert a
<br> tag. However, carriage returns do affect how HTML handles spaces at the end of the
line and at the start of the following line. Leading spaces (i.e. ones on a line before any non-
space characters) are typically ignored, as are trailing spaces (i.e. ones on a line after the
last non-space character). However, browsers typically insert a 'breaking space' at the end
of each line, which often then shows up as a single space. Multiple spaces one after the
other are interpreted as a single space. To include more than one space in such instances
you need to include a ‘non-breaking space’ as a special character.

For example the following markup:

Hello (followed by two carriage returns)<br><br /> Hello

again
and again

creates the following output:

Hello (followed by two carriage returns)

Hello again and again

Webpage authors typically put a lot of effort into creating visually appealing material. One
way of breaking up text is to insert a thematic break line or horizontal rule, i.e. a <hr> tag,
which places a line across the window like:

4. Commenting
It can be helpful to include comments in HTML documents that are not displayed but help
readers of the underlying markup text you to understand what the HTML is trying to do.
Comments in HTML take the form <!-- comment --> and ignore line breaks within the
opening and closing tags of the comment element.

For example, markup as follows:

<!-- material explaining how commenting in HTML

works-->

creates the following output (i.e. nothing):

27
 5. Special characters
The underlying markup of a webpage typically contains many more ampersand characters
(i.e. &) than appear in the rendered output. This is because the & character is part of the
way in which HTML marks up 'special' characters, i.e. ones that would otherwise be
understood by HTML to relate to markup. In HTML, each special character is preceded by
an ampersand, followed by the HTML markup name for that character followed by a
semicolon. Perhaps the most common special characters are:

Special character Meaning HTML code

ampersand & &amp;
space (technically a
‘non- (e.g. as in Hello again) &nbsp; (e.g. as in
breaking’ space) Hello&nbsp;&nbsp;&nbsp;again)
less than sign < &lt;
greater than sign > &gt;
quotation mark " &quot;
apostrophe ' &apos;

Assignment: Find a fuller list of HTML special characters.

6. Hyperlinks
Many people associate web pages with hyperlinks, i.e. the ability to navigate from
one page to another page. In HTML, hyperlinks (also called ‘anchors’) typically have
the following sort of structure:

<a href="Pages/AboutNematrian.pdf";>text</a>

The text is what the user sees, the value of href is where the link points to. Points to note
include:

(a) The ‘text’ material seen by the user can contain HTML, so can include e.g.
images and formatted text
(b) The href value used here, i.e. “Pages/AboutNematrian.pdf” means that the link
points to a webpage (or other resource) called “AboutNematrian.pdf” in the
directory “Pages” (strictly speaking a subdirectory of the directory in which the
source webpage resides, unless it e.g. starts with http:// or https:// or unless the
document’s <base> element, if any, defines a different base address to be used
by relative uniform resource locators, i.e. ‘URLs’).

The above link renders as:

text

Groups of hyperlinks can be included in a <nav> element. For example, markup as follows:

<nav>
<a href="Introduction.aspx">Introduction</a> | <a
href="IntroductionSoftware.aspx">Software</a> </nav>

creates the following output, involving 2 individual hyperlinks:

Introduction | Software

28
7. HTML elements and their attributes

The basic building blocks of HTML are elements (also called tags). HTML elements are by
default differentiated from the text around them. The most general way of formatting text
(capable of altering any of the default formatting of any visible HTML element) involves use
of Cascading Style Sheets (CSS) or in-file or in-line equivalents. In-line CSS involves
assigning a specific style attribute to a given element. Other sorts of attributes can also be
assigned to different sorts of elements. The exact range of attributes valid for a specific
element type does vary.

Many other elements are also by default differentiated from the text around them or exist
primarily to facilitate this sort of differentiation. Examples include:

HTML element Normally used for e.g. example

Contact information for the author or owner of Mr. Smith, 1,
<address> a George Street,
document Georgetown
<b 1, George
> Bold text Street,
Georgetown
<blockquote> Section that is quoted from another source 1, George
Street,
<cite> Title of a work Georgetown
<code Systemic Risk
> A piece of computer code var x = 2.0;
<del> Indicates text deleted from a document abc
<dfn> Defining instance of a term HTML, a
Emphasised text (often used to italicise text, markup
but language
ideally this should be done using CSS, as
<em> emphasis HTML, a
markup
does not need to involve italics) language
<footer
> Footer for a document or section HTML

29
 Header 1
Header 2
<h1>, <h2>, <h3>,
HTML headings Header 3
<h4>, <h5>, <h6>
Header 4

Header 5

Header 6

<header HTML
> Header for a document or section HTML, a markup
<i A part of text in an alternate voice or language
> mood def
text representing
<ins
keyboard input
> Indicates text added to a document
<kbd text to highlight
> Keyboard input preformatted text (in
fixed -width
<mark font that also
> Marked/highlighted text preserves spaces
and line breaks

<pre> Preformatted text

<q Mary had a little

> Short quotation
lamb abc
<s> Text that is no longer correct
output
<samp> Sample output from a computer program
1, George
<small> Smaller text Street,
Georgetown

<strong> Defines more important text, commonly used as Mary had a

another way of highlighting text or making it bold little lamb
<sub> Subscripted text A1
<summary Heading
> Heading for a <details> element
A1
<sup> Superscripted text
Date / time (N.B. isn't normally differentiated 10:00
<time> from
standard text in most modern browsers) abc
Text that should be stylistically different from
<u> normal
text, commonly used for underlining
<var> Variable Param1
Possible line-break, the Word Break Opportunity
tag
30
 specifies where in a text it would be ok to add a
<wbr> line-
break

31
Some HTML elements are no longer supported in HTML5. Although they often work in
browsers you should ideally use CSS instead. These include:

HTML element Normally used for e.g. example

<big> Big text

1, George
Street,
<center> Centred text
Georgetown
<font> as in e.g. <font abc
color="green"> Green text
green text
<strike> Strikethrough text, not supported
in HTML 5 (instead use <del> or
<s>) abc
<tt>
Teletype text abc

Some HTML tags differentiate content, but primarily to assist the browser's understanding
of that content, e.g.:

exampl
HTML element Normally used for e.g. e
<abbr> as in e.g. <abbr
Abbreviation or acronym Mr.
title="Mister">
<data> as in e.g. <data
Links content with a machine-readable translation Apple
value="1011">

Some HTML tags demarcate content so that the material can be segmented up more
effectively, or assigned different formatting styles, e.g.:

HTML element Normally used for e.g. example

<article> Article Title

Material
Title
<aside> Content aside from the page content Material
<details Title
> Additional details that a user can view or hide Material
a single piece
<div> Section in a document of content
main text
<main> Main content of a document
Paragraph (by default has space added above and a paragraph
<p> below
the text) a section
<section> Section in a document a section (span)
<span> Section in a document

Assignment: Get a more detailed list of HTML elements and their attributes

32
8. Browser feature detection
Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript form
the main elements of modern webpages. However, different browsers do not always
interpret these webpage components in entirely consistent ways.

There are two main ways in which this occurs:

(a) HTML, CSS and JavaScript are evolving through time, particularly as new ways of
interacting with webpages are developed. Most of their core components are
understood by essentially all browsers. However, some newer features may only
work on some browsers. Some may be released in ‘beta’ or ‘test’ form, but may
eventually be dropped in any finalised updates.
(b) Webpages are nowadays accessed across a wide range of formats. These formats
can take different physical forms. Even when they involve a ‘traditional’ screen-based
format, the screens can come in many different sizes and resolutions (e.g. a PC-
based screen is typically larger, and easier to resize, than a mobile phone-based
screen). This makes it desirable to alter the way in which material is displayed
depending on the format involved.

Historically, webpage developers solved this problem using ‘browser detection’. In this
approach, the developer would include in the webpage (or on the server delivering the
webpage to the user) some means of detecting which browser was being used to access the
webpage. This had two main weaknesses. First, there are now many different browser
providers most of whom also have many versions of their browsers available. This made it
very difficult for developers to keep up with the changing browser scene. Second, a ‘browser
detection’ approach fails to address (b) above. The same browser can run on multiple
devices; if the devices themselves have different characteristics then these won’t be
captured merely by identifying the browser being used.

Nowadays, the trend is to use ‘feature detection’. In this approach, the developer includes
elements or other components in the webpage that identify if the browser and device being
used to access the webpage supports a specific feature. The output is then optimised
bearing in mind whether the feature is available.

Sometimes this type of functionality is explicitly built into HTML. For example, the media file
formats recognised by HTML <audio> and <video> elements vary by browser. These HTML
elements specifically allow developers to refer to more than one media source, depending
on the format involved. The browser being used can then select whichever source it
recognises. If it doesn’t recognise any (or if it is not new enough to recognise <audio> or
<video> elements), fallback text will be displayed. The CSS @media rule can also be used
in a way that allows the developer to alter the style used by an element to reflect the media
in which the page is being viewed (e.g. the width or height of the device).

At other times, feature detection needs to be coded using JavaScript. The typical approach
is to identify whether a feature is supported by the browser and then to adjust output
formatting accordingly. However, it is not always easy to identify whether a specific feature is
supported by the browser. Possible methods include:

- Use the hasFeature method to determine whether the JavaScript Document Object
Model (DOM) implementation supports the relevant feature
- Search for DOM objects, properties or methods associated with the feature

33
 - Attempt to create an object that should have the feature and if creation is successful
then test whether it does support the feature

Unfortunately, the hasFeature method is not well supported by several browsers and its use
is often not recommended.

Assignment: Identify existing functions for JavaScript features that can assist in checking
whether the feature is being supported by the browser being used at the time.

34
 16. Brief Introduction to CSS

1. Introduction

Cascading Style Sheets (CSS) is one of the three main components of modern webpages,
along with Hypertext Markup Language (HTML) and JavaScript. HTML indicates to the browser
what elements should be included on the page (and in what order). CSS indicates how each
should be styled.
JavaScript provides a means for webpage authors to manipulate these elements
programmatically and in response to actions by the end user.

CSS instructions can be:

(a) included within an individual HTML element (as part of the mark-up relating
to that element), i.e. as ‘in-line’ CSS
(b) included in the HTML file where the relevant element(s) are located, but not directly
within the elements concerned, i.e. as ‘in-file’ CSS
(c) included in external CSS files, i.e. as ‘external’ CSS, with a HTML <link>
element used to indicate where any such CSS files applicable to a given HTML
file are located.

The style attributes of an HTML element can also be altered by JavaScript ‘on the fly’, e.g.
after the page has initially loaded or in response to specific user actions such as clicking a
button.

CSS styles typically operate according to a hierarchy, with any JavaScript overrides taking
precedence over any CSS styles present when the page is initially loaded but otherwise in-
line CSS takes precedence over in-file CSS and in-file CSS takes precedence over external
CSS (unless the ‘important’ characteristic is included in the style statement). In-file CSS is
contained in a <style> element. If there is more than one such element then later ones take
precedence over earlier ones.

Older versions of HTML (e.g. HTML 4) require <style> elements to be in the <head> of the
HTML file, although most browsers currently seem to accept them even if they appear in
the <body>. In theory, HTML 5 (the currently latest version) has the concept of a ‘scoped’
attribute (e.g. <style scoped>) which should allow you to apply different <style> elements
to different parts of the webpage (which could then legitimately appear in the <body>
element), but not all browsers currently seem to cater for this aspect of HTML 5.

External style sheets are referenced using a <link> element, which goes inside the <head>
section.
This type of link element has a form such as:

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

External style sheets can be created in any text editor, should not contain any HTML tags
(elements) and should be saved with a .css extension.

In-file and external CSS are typically set out in the form of ‘rule-sets’. A rule set involves a
selector and a declaration block. The selector points to the type of HTML element to which
the style applies, whilst the declaration block contains one or more style declarations
separated by semicolons. Each declaration involves a CSS property name, followed by a
colon, followed by the value assigned to the property.

For example, the style rule

h3 {color: blue; text-align: center;}

35
has a selector which is h3 and a declaration block which is {color: blue; text-align: center;}. It
tells the browser that any <h3> element (to which the rule applies) should be centre-aligned
and appear in blue. As with HTML, line breaks and multiple spaces are ignored.

Assignment: Find out about other types of selectors

In-line CSS rule-sets involve the style attribute (and do not include a selector or the curly
brackets / braces included in in-file or external CSS), e.g. they involve setting the element’s
style attribute along the lines of: style = "color: red";.

Comments in CSS start with /* and end with */ and can span multiple lines.

Over time CSS has been refined. CSS3 is the current latest version, and features in
CSS1 and CSS2 can typically still be used in CSS3.

2. Selectors

CSS is typically set out in the form of ‘rule-sets’, which involve a selector and a
declaration block. Usually CSS is applied to types of elements. For example, the style
rule

h3 {color: blue; text-align: center;}

has a selector which is h3 and a declaration block which is {color: blue; text-align: center;}. It
tells the browser that any <h3> element (to which the rule applies) should be centre-aligned
and appear in blue. As with HTML, line breaks and multiple spaces are ignored.

However, within HTML you can also define classes of elements with common formatting
styles using the element’s class attribute. For example, the style rule

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

would indicate that any element with a class attribute equal to center should be centre-
aligned and appear in red.

You can also apply CSS to elements of a specific type and class. For example, the style rule

h3.center {color: green;}

would indicate that <h3> elements that have their class attribute equal to center should
be green.

In-file CSS can also be applied to individual elements, if the id attribute of the HTML
element has been set (the id attribute should be unique within any given page). If you
want to use this type of CSS then precede the id value by a hash (#) character.

For example, the style rule

#para1 {color: yellow}

would be applied to the HTML element with id equal to para1 (provided there is such an
element) and it would appear yellow (unless overridden by a later style rule).

You can also group together rules for elements with the same style definitions,
separating each selector with a comma. For example,

36
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

can be grouped together as follows to minimise code and make it easier to follow:

h1, h2, h3 {color: red;}

Assignment: Find out more general ways of identifying CSS selectors

3. Hints and further information

CSS Values

In CSS, if you are using values that have units, e.g. applying values that are to be
interpreted as CSS lengths (e.g. setting the size of an element’s left margin using e.g.
margin-left: 20px) then you should not include a space between the value (here 20) and the
unit (here px) as otherwise the style may be ignored.

There are several ways of defining lengths in CSS. There are also specific conventions
used when defining CSS times, CSS angles and CSS colours.

Hierarchy in CSS style rules

If you have two or more style rules that would otherwise apply to a specific attribute of a
specific element then the hierarchy rules are that:

- More specific rules override more general ones. Specificity is defined based on how
many IDs, classes and element names are involved as well as by whether there is an
!important declaration.
- When even these do not differentiate between styles then whichever one appears
last is the one that is applied.

For example, without the !important flag, <h3> elements using the following styles would
appear green (as the green style rule is after the red one), but with the !important flag it is
the red one that applies in this instance:

h3 {color: red !important}

h3 {color: green}

Setting the CSS style of the whole page

The style of the whole page can be set by a style rule such as:

body {background-color: lightblue;}

Multi-valued CSS properties

Some CSS properties take several values. For example, many HTML elements are
deemed to have 4 sides (top, right, bottom and left) and there are conventions on how to
define properties that encompass all four sides simultaneously, see here.

More generally, some CSS properties are shorthand properties that set several other more
granular properties at the same time.

37
Animation and other more sophisticated features

CSS has developed over the years and it is now possible to create relatively sophisticated
animation effects using the CSS @keyframes rule, without needing to implement these
animations using JavaScript. It is also possible to apply different styles depending on the
device being used to render the material, using the CSS @media rule. Material can be
automatically added before or after HTML elements using CSS ‘pseudo-properties’, such
as the content pseudo-property.

Styling of hyperlinks

Links can be styled differently depending on what state they are:

Link state Description

a:link Normal, unvisited link
a:visited Link that user has visited
a:hover Link when the user moves a mouse over it
a:active Link at the moment it is clicked
Advanced table
formatting

Zebra-striped tables can be implemented using the nth-child selector, e.g.:

tr:nth-child(even) {back-ground-color: #f2f2f2;}

To make a table responsive (i.e. to display a horizontal scroll bar if the screen is too small
to display in full) you can add a container element with overflow-x:auto, e.g.:

<div style=”overflow-x:auto;”><table> … </table></div>

38
 17. Brief introduction to JavaScript

1. Introduction

JavaScript is one of the three main components of modern webpages, along with Hypertext
Markup Language (HTML) and Cascading Style Sheets (CSS). HTML indicates to the
browser what elements should be included on the page (and in what order). CSS indicates
how each should be styled. JavaScript provides a means for webpage authors to
manipulate these elements programmatically and in response to actions by the end user.

JavaScript can be added to a webpage in one of three ways (somewhat akin to how
CSS can be added to a webpage):

(a) By including it within an individual HTML event attribute. This typically involves
only very small JavaScript statements.
(b) Within separate <script> elements in the HTML
(c) In external script files (these involve including in the HTML a <script> element
with its src attribute set to the relevant script file name).

A simple example of JavaScript involves the use of the document.write method. For
example, the following HTML text would return a web page the first line of which says
“Hello World (using HTML)” followed by a line break and a second line saying “Hello
World (using HTML)”. Script elements are typically executed in the order in which they
appear when the page is first loaded. In this case the script cause the browser to add
some more text to the web page.

<html>
<body>
Hello World (using HTML)<br>
<script>
<!--
document.write("<br>Hello World (using Javascript)")
//-->
</script>
</body>
</html>

More sophisticated approaches can alter individual HTML elements rather than merely
adding to the end of the document or can react to events such as the clicking of a button.
For example, the following HTML text returns a web page with two lines, the first being
“Hello World (using HTML)” and the second line being “and using JavaScript”.

<!DOCTYPE html>
<html>
<head></head>
<body>
Hello World (using HTML)<br>
<em id="Added"></em>

<script>
document.getElementById("Added").innerHTML="and using JavaScript"
// Adds text to the element with id="Added" </script>

</body>
</html>
39
40
Note: we are here taking advantage of the execution of script commands when the page
first loads. A more complicated (but more general way) of achieving the same result would
be to add an ‘event listener’ that is triggered when the page loads and to have a function
associated with this event listener that alters (here adds) the text in the desired manner
when the event happens. By attaching the function to a different event, e.g. one triggered
when the user clicks on an element then the a more responsive webpage can be created.

JavaScript comments

When writing computer software, it often helps to add explanatory comments. In JavaScript,
a single line comment is indicated by “code // text” where the code is still executed, but the
text is ignored by the Browser.

Any text between “/*” and “*/” (not in quotes) including line breaks is also ignored,
allowing authors to create multi-line comments. These tend to be used for formal
documentation, e.g. material at the start of each function that describes what the
function does.

2. Variables
A variable in JavaScript is defined by a command such as:

var x;

If you want to set a variable to a value when it is first defined then you generally use the
assignment operator within this definition, e.g.:

var x = 10;

JavaScript recognises the following types of ‘primitive’ variables:

- String variables
- Number variables
- Date variables
- Boolean variables

Variables can also be objects and arrays (and for some string manipulation purposes,
regular expressions). In JavaScript, an array is a special type of object that is indexed
along the lines of a[0], a[1]…. Arrays can consist of other objects, including other
arrays.

Several variables can be defined in the same statement, with each one separated by a
comma, e.g.:

var x = 10, y = 15, z = 20;

Variables that have not yet been defined a value have their value as undefined.

If you redefine a variable, it retains its previous value. For example, after the statements

var x = 10;
var x;

the variable x still has the value 10.

41
Variables are manipulated using operators and functions. For example, numbers can
be added together using the addition operator or functions can be applied to them,
e.g.:

var x = 0.1 + 0.2;

function sinsquared(x) {
var a;
a = Math.pow(Math.sin(x),2);
return a;
}
var y = sinsquared(0.3);

JavaScript variable names (i.e. identifiers) follow certain rules:

- They can contain only letters, digits, underscores and dollar signs
- They must typically begin with a letter (in some cases they can also begin with a
$ or an _ character)
- The names are case sensitive (i.e. a and A are different names)
- They cannot be reserved words, such as those used in JavaScript statement
construction)

An important concept in programming is the scope of a variable (or more precisely of its
name). This is the part of the code within which the relevant variable is accessible via its
name. If code is segmented into blocks then it is often desirable to use a similar variable
name in different blocks but for the names to then be associated with different variables
depending on the block in question. The scope of a JavaScript can be local or global.
Variables defined inside functions are local to that function, whilst those defined outside
functions are global in scope. Local variables are deleted when the function completes, while
global variables remain available until the user closes the browser window or tab within
which the page has been loaded. This means that they are available to new pages loaded
into the same browser window. Function arguments work in the same manner as local
variables inside a function.

String variables

Strings consist of a series of consecutive characters, e.g.

var x = "Cat";

A string technically consists of a series (an ‘array’, except that a JavaScript array is a
specific type of variable) of characters, which is zero-indexed. So, if we assigned x the
value of "Cat" then x[0] would be "C", x[1] would be "a", etc.

Assignment: Explore in details on the methods and properties supported by string

variables in JavaScript

Regular expressions

Some string methods and properties involve ‘regular expressions’. These take the form:

/pattern/modifiers

e.g.:

var x = /nematrian/i;

42
Numbers (and mathematical manipulations)

JavaScript has only one type of number (in contrast to, e.g. Visual Basic, which
differentiates between e.g. integers, floating point numbers and double precision
numbers). Numbers can be written with or without decimal points and/or with or without
(scientific) exponents), e.g.

var x = 4.1; // With a decimal point

var y = 4; // Without a decimal point
var p = 135e6 // Means 135000000
var q = 13.5e-3 // Means 0.0135

Dates

Date variables are objects and contain dates and times. They can be instantiated in 4 ways:

var d1 = new Date(); // An as yet undefined date

var d2 = new Date(milliseconds); // See below
var d3 = new Date(dateString); // See below
var d4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Here milliseconds refers to the number of milliseconds since 1 January 1970 00:00:00. A
dateString is a piece of text that the browser can recognise as representing a date.

Booleans

Boolean variables take one of two values, true or false. They are instantiated by a
statement such as:

var b = true;

You can use the Boolean() function to identify whether an expression is true or false,
although it is simpler just to use operators that return Boolean outputs, e.g. Boolean(2 > 1),
(2 > 1) or even 2 > 1 all return true.

Arrays

Arrays contain multiple (indexed) values in a single variable. Array indices are zero-
based, i.e. the first element of the array has as its index 0, the second 1 etc. They are
instantiated by statements such as:

var a = ["France", "Germany"];

var b = [1, 2, 5, 4];

It is worth noting that elements of arrays can themselves be arrays since technically an
array is a specific type of object.

Further details on the methods and properties supported by arrays (and some of the
subtleties that arise if you want to copy them) are set out in JavaScript Tutorial: Arrays.

Objects

JavaScript objects are containers that contain properties and methods. For example, a
statement such as:
43
var person = {title:"Mr", surname:"Smith", age:30}

creates an object that has three properties, i.e. name-value, pairs that in this instance
characterise (some of the features of) a person.

Object properties can be accessed in two ways, either here e.g. person.title or
person["title"] (both of which in this instance would return a value of "Mr"). An array is a
specific type of object with the property names indexed from 0 up to the length of the
array less 1 (and hence elements of arrays can themselves be arrays or other sorts of
objects).

Object methods are functions that can be applied to objects. They are technically also
property-like in nature, i.e. again come in name-value pairs, but with the ‘name’ being a
function name (with parameter definitions if necessary) and the ‘value’ being the
JavaScript function script associated with that function, see JavaScript Tutorial: Objects.

A special type of object is the Error object, which is used for error handling.

3. Statements

JavaScript statements identify instructions that are executed by the web browser. For
example, the following statement tells the browser to write “Hello World” inside an HTML
statement with the id attribute = "element":

document.getElementById("element").innerHTML = "Hello World"

The same result can be achieved using several separate statements, e.g.:

var d = document.getElementById("element");
var x = "Hello";
var y = " World";
var z = x + y;
d.innerHTML = z;

Statements are separated by semicolons and multiple statements are allowed on one line.
JavaScript ignores multiple spaces (except in strings, i.e. within quotation marks). A
common good practice is to put spaces around operators (e.g. =, + , …). Very long lines of
code are also often frowned upon, and are usually broken after an operator.

Statements can (and often are) grouped together in code blocks, inside curly brackets, i.e.
{ … }. A particularly important example of the use of code blocks involves functions, which
provide a means of executing on demand one or more statements, e.g.:

function func() {
document.getElementById("element").innerHTML = "Hello";
}

Statements often start with a statement identifier. These are reserved words which cannot
be used as variable names or for other purposes. A list of statement reserved words
recognised by JavaScript is shown here. They include: break, continue, do, for, if, return,
switch, throw, try, catch, var and while.

Most JavaScript programs contain many statements, which are executed one by one in the
order in which they are written except when statement flow control is adjusted using
statements such as for, if or while.

44
4. Functions

A JavaScript function is a block of JavaScript code that can be executed as a discrete unit.
It involves a function statement along the lines of e.g.:

function func() {
document.getElementById("element").innerHTML = "Hello";
}

Function definitions can include parameters (separated by a comma if more than one
parameter), e.g. the following (if passed a string variable) would allow any text to be
inserted in the relevant element’s innerHTML.

function func2(x) {
document.getElementById("element").innerHTML = x;
}

Such a function would be invoked by JavaScript such as func2("Hello World").

Functions are much like procedures or subroutines in other programming languages. The
code inside the curly brackets executes when the function is invoked. This can happen
when an event occurs, when the function is called from JavaScript code or sometimes when
it is self-invoked. If a function includes a return statement then the function will stop
executing and will return the value identified by the function’s return statement. The function
(technically, a special type of object) can be distinguished from the act of invoking it. The ()
operator invokes the function, e.g. in the above func refers to the function object, but func()
will invoke the function itself.

The function parameters are the names listed in the function definition (i.e. the x in the
definition of func2). Function arguments are the values received by the function (i.e.
assigned to the function parameters) when it is invoked.

Function names can contain letters, digits, underscores and dollar signs (the same rules
as apply to variable naming applies to function naming). Wherever a variable can be used,
a valid function call evaluating to the same value can also be used.

5. Event handling
A responsive website needs to respond to users when the users act in specific ways, e.g.
loading a page, clicking on a button, moving a mouse around a document window etc.
JavaScript, like many other modern more sophisticated general-purpose programming
languages, includes the concept of events. These assign specific functions to specific
events, with the functions being invoked if/when the event occurs.

Event handling linked to individual elements, such as what happens when someone
clicks on an element, is often implemented by assigning a specific function to the event
attribute of that element, see here.

Global events (not linked to specific HTML elements), such as those triggered by loading
the page, are typically implemented by using e.g. the document.addEventListener
method, e.g.:

document.addEventListener('load', addtext());

45
6. The Document Object Model (DOM)

The JavaScript HTML Document Object Model (‘DOM’) provides a way for JavaScript to
access all elements of an HTML webpage. Fuller details of the DOM are given here.
There is an associated Browser Object Model (BOM), details of which are given here.

The browser creates a DOM (i.e. a document object) for a page when the page is first
loaded. This has a tree structure, with the root element (or ‘node’) being the page’s <html>
element. The root element then has two sub-elements (or ‘nodes’), i.e. the <head> element
and the <body> element.

The <head> element will in turn often include as one of its ‘child’ nodes a <title> element.
The <body> element contains the main body of the webpage and will typically contain
many different elements, some nested within others. JavaScript can change all the
elements (including all their attributes), can add new elements or remove existing ones,
can react to all existing events and create new ones.

Formally, the DOM is a W3C (World Wide Web Consortium) standard. It has the following
aim, according to W3C: “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.” It is formally subdivided into three
parts: (a) the Core DOM for all document types, (b) the XML DOM for XML documents,
and (c) the HTML DOM for HTML documents. It adopts an object-orientated programming
approach, with the HTML elements being objects which have properties and to which can
be applied methods. The elements can also trigger events.

A common way of accessing an element is to assign it an id (i.e. set its id attribute object to
a prespecified value). The element can then be identified in Javascript by applying the
getElementById method to the document object, returning an object corresponding to the
element. Its properties (e.g. its innerHTML property, which is the text within an element)
can be set by assigning values to the relevant property of the element object. For example,
the following example returns a web page that says “hello”.

<html>
<body>

46
<div id="example"></div>
<script>document.getElementById("example").innerHTML =
"hello"</script>
</body>
</html>

Common ways of accessing the DOM include:

Aim Example JavaScript Description

Finding / document.getElementById(id) Returns object
corresponding to
accessing element
elements with this id attribute
document.getElementsByTagName(name) Returns collection of
elements by tag name
(i.e. by type of element)
document.getElementsByClassName(name) Returns collection of
elements by class name
document.querySelectorAll(CSSSelector) Returns collection of
elements by
CSSSelector
Changing element.innerHTML = HTMLcontent Change inner HTML of
elements element
Change attribute value
element.attribute = value of
element (value needs to
be valid for that attribute)
element.setAttribute(attribute, value) Change attribute value
for a given element
Adding and document.createElement(element) Creates HTML element
deleting document.appendChildElement(element) Add HTML element
elements document.removeChildElement(element) Remove HTML element
document.replaceChildElement(element) Remove HTML element
document.write(element) Write directly to HTML
output

Other points to note about the DOM include:

(a) The DOM uses the idea of nodes and a node tree. This involves a tree structure
where each branching point is a separate node. So, nodes belong to (are children of)
just one other node (their parent) back to the root node (which in the DOM is the
document object)
(b) HTML elements are ‘element’ nodes, the attributes of these elements are ‘attribute’
nodes, the text within HTML elements are ‘text’ nodes and comments are
‘comment’ nodes
(c) A NodeList object represents a set of nodes, e.g. an HTML element’s collection of
child nodes. These will be indexed and each node within the NodeList can then be
associated with another NodeList (its children)
(d) The HTML document, once it has been loaded into the web browser, is formally
part of the corresponding Window object and can therefore be accessed via
window.document
(e) The DOM supports a range of (own) methods and properties, see here.
(f) HTML elements (‘nodes’) within the DOM also support a range of more generic
methods and properties, see here. These also apply to the document object itself but
do not always make much sense when applied in this manner.

47
 (g) HTML element attributes are represented by an Attr object. These are always
children of a specific HTML element. The properties and methods that apply to Attr
objects are shown here.
(h) A NamedNodeMap object represents an unordered collection of nodes, e.g. the
set of attributes assigned to a given HTML element. Properties and methods
that apply to NamedNodeMap objects are shown here.
(i) The DOM object and its components can be thought of as an example of an XML
document. XML documents have several methods and properties not otherwise
covered in the above (such as XMLHTTPRequest, which can be used to send,
request and receive data from the server once a webpage has loaded), see here.

7. Further Comments on JavaScript for developers

JavaScript syntax:

- Statements are separated by semicolons, e.g. var x, y, z; x = 3;

- The language consists of values, operators, expressions, keywords and comments
- Values can be literals (fixed values) or variables.
- Number literals are written with or without decimal points, e.g. 100 or 10.1 (commas
should not be used as the decimal separator)
- String literals are text, written within double or single quotes, e.g. x = "35"; y = 'a'; -
Variables are declared using the var keyword, e.g. var x; var y = 10;
- The equal sign is used to assign a value to a variable, e.g. x = 3;, i.e. it is the
assignment operator
- An expression is a combination of values, variables and operators
- String concatenation is achieved by +, e.g. "a" + " " + "b" evaluates to "a b"
- Comments are noted by text after double slashes “//” or between /* and */
- Identifiers are used to name variables. The first character must be a letter, an
underscore character (“_”) or a dollar sign (“$”)
- JavaScript is case sensitive, e.g. firstName, FirstName and firstname will be three
different variables
- JavaScript typically uses ‘lower camel case’ when joining multiple words together, i.e.
first letter of first word is lower case, first letter of each subsequent word is upper
case, e.g.
“firstName”. Some methods and properties specifically use this convention, and
because
JavaScript is case sensitive it means that using a different convention will result in an
incorrect (or failed) evaluation. Developers often adopt the same convention when
naming variables.
- JavaScript uses the Unicode character set

Displaying (text / numerical) data using JavaScript:

- Text and values can be inserted into an HTML element, using e.g. the innerHTML
property
- We can write to the browser output stream, using e.g. document.write() (this is useful
for testing purposes)
- We can write to an alert box, using e.g. window.alert()
- We can write into the browser console, using e.g. console.log()

Location of any JavaScript within HTML webpages:

- HTML in-file JavaScript needs to be inserted in script elements.

- Any number of scripts can be included in an HTML document and can be placed in
either the <body> or the <head> section

48
Global methods and properties:

JavaScript has some global properties and functions that can be used with all built-in
JavaScript objects. These include:

Global properties:

Property Description
Infinity A number that is positive infinity (-Infinity
refers to a number that is negative infinity)
NaN Not-a-Number result of a numeric calculation
undefined Indicates variable has not been assigned a value

Global methods:

These are perhaps best referred to as global ‘functions’ since they are called globally.

Method / Function Description

Boolean() Converts an object’s value to a Boolean (i.e. true
or false)
decodeURI() Decodes URI
decodeURIComponent() Decodes URI component
encodeURI() Encodes URI
encodeURIComponent() Encodes URI component
escape() Depreciated. Use encodeURI() or
encodeURIComponent() instead
eval() Evaluates a string as if it were script code
isFinite() Returns true if finite, otherwise false
isNaN() Returns true if NaN, otherwise false
Number() Converts an object’s value to a number
Parses a string and returns a floating-point
parseFloat() number
parseInt() Parses a string and returns an integer
String() Converts an object’s value to a string
unescape() Depreciated. Use decodeURI() or
decodeURIComponent() instead

Properties shared by multiple JavaScript objects:

JavaScript includes some properties that can be applied to any object and can allow the
user to alter the methods and properties applicable to the object. These include:

Property Description
constructor Returns object’s constructor function
length Returns the length of the object
Allows author to add properties and methods to
prototype an
object

49
Conversions between variable types:

An area of JavaScript that can be confusing (and hence can lead to errors) is the handling
of conversions between different variable types. JavaScript is ‘weakly typed’, i.e. variables
can change type in some circumstances. Examples of what happens when variables are
explicitly converted using global type conversion functions are set out below. It is important
to bear in mind that type conversion can also happen implicitly, e.g. if we try to
concatenate a number with a string then the number will be converted to a string
beforehand.

Original value (x) Result of conversion Result of conversion Result of conversion

to a string, using to a number, using to a Boolean, using
String(x) Number(x) Boolean(x)
false "false" 0 false
true "true" 1 True
0 "0" 0 false
1 "1" 1 True
"0" "0" 0 false
"1" "1" 1 True
NaN "NaN" NaN false
Infinity "Infinity" Infinity True
-Infinity "-Infinity" -Infinity True
"" "" 0 false
"10" "10" 10 True
"ten" "ten" NaN True
[] "" 0 True
[10] "10" 10 True

50
[5,10] "5,10" NaN True
["ten"] "ten" NaN True
["five","ten"] "five","ten" NaN True
function(){} "function(){}" NaN True
{} "[object NaN True
Object]"
null "null" 0 False
undefined "undefined" NaN False

It is worth noting that some of the global type conversion functions are mimicked by type conversion
functions attached to specific object types. The behaviours of the two apparently similar functions are not
always identical, as the ones attached to specific object types will include a conversion into the relevant
type before there is an attempt to convert the variable into its eventual output type.

Recent developments:

In recent years, the capabilities and therefore sophistication of the JavaScript language has grown
considerably. Browser developers have put a considerable amount of effort into arranging for JavaScript
code to run as quickly as possible within browsers. For example, they have developed ‘just in time’
compilation techniques to supplant older purely interpreted ways of executing the JavaScript statements.
JavaScript as a language has been standardised and object-orientated programming tools such as error
trapping have been added. Event handling (which is particularly important for browser based programs)
has been further refined. Its DOM has continued to evolve and become more sophisticated as website
usage has expanded and evolved.

51