Web Building Introduction

Every Web developer has to know the building blocks of the Web:

• HTML 4.01
• CSS
• XHTML
• XML and XSLT
• JavaScript
• ASP or PHP
• Managing data with SQL

• The future of the Web

HTML 4.01
HTML is the language of the Web, and every Web developer should have a basic understanding of it.

HTML 4.01 is an important Web standard, and very different from HTML 3.2.

When tags, like <font> and color attributes, were added to HTML 3.2, it started a developer's
nightmare. Development of web sites where font information must be added to every single Web page
is a long and expensive job.

With HTML 4.01, all formatting can be moved out of the HTML document, and into a separate style
sheet.

HTML 4.01 is also important because XHTML 1.0 is HTML 4.01 "reformulated" as an XML application.
Using HTML 4.01 in your pages makes the future upgrade from HTML to XHTML a very simple process.

Make sure you use the latest HTML 4.01 standard.

CSS - Cascading Style Sheets

Styles define how HTML elements should be displayed, just like the <font> tag in HTML 3.2.

Style sheets are normally saved in external files. External style sheets enable you to change the
appearance and layout of EVERY page in your Web site, just by editing a single document. If you have
ever tried changing something like the font or color of all the headings in all your HTML pages, you will
understand how CSS can save a lot of work!

XHTML
XHTML stands for Extensible HyperText Markup Language.

XHTML is a reformulation of HTML 4.01 in XML, and is supported in all major browsers.

XML - A Tool for Describing Data

XML is NOT a replacement for HTML. XML describes data, while HTML displays the data.

XML is as a cross-platform, software-, and hardware-independent tool for storing and transmitting
information.

We believe that XML is as important to the Web as HTML was to the foundation of the Web, and that
XML will be the most common tool for all data manipulation and data transmission.

XSLT - A Tool for Transforming Data

XSLT is used to transform XML documents into other formats, like HTML, WML, etc.
XSLT can transform an XML file into a format that is recognized by a browser.

XSLT can also add HTML elements, rearrange and sort data, make decisions about which data to
display, and more.

JavaScript - Client-Side Scripting

Client-side scripting is about "programming" the behavior of a browser.

To deliver more dynamic web content, you should teach yourself JavaScript.

• JavaScript gives HTML designers a programming tool

• JavaScript can put dynamic text into an HTML page
• JavaScript can react to events
• JavaScript can change HTML elements
• JavaScript can be used to validate data

ASP or PHP - Server-Side Scripting

Server-side scripting is about "programming" an Internet server.

To deliver more dynamic web content, you should teach yourself server-side scripting.

With server-side scripting, you can:

• Dynamically edit, change, or add any content of a Web page

• Respond to user queries and form data
• Access databases and return the result to a browser
• Access files and return the result to a browser
• Transform XML data to HTML data and return the results to a browser
• Customize a Web page to make it more useful for individual users
• Provide security and access control to Web pages
• Tailor your output to different types of browsers
• Minimize network traffic

Managing Data with SQL

SQL is the standard language for accessing and manipulating databases.

SQL is used to access and manipulate data in MySQL, SQL Server, MS Access, Oracle, Sybase, DB2,
and other database systems.

Knowledge of SQL is a must for anyone wanting to store or retrieve data from a database.

What Will the Future Bring?

One important thing to know is that the functionality of Web Sites will change very drastically. We will
see a huge shift from sites displaying "static content" to data driven sites delivering "dynamic
content".

We will also see new browsers, like the browsers found in mobile devices. We will also see more use of
XML for transmitting data between servers, or between servers and browsers.

Designing Web sites needs careful thinking and a lot of planning.

The most important thing is to KNOW YOUR AUDIENCE.

Users are Scanners

A typical visitor will NOT read the entire content of your Web page!
No matter how much useful information you put into a Web page, a visitor will only spend a few
seconds scanning it before they decide whether to leave or to stay.

Be sure to make your point in the very first sentence of the page! After that, try to keep the user
occupied with short paragraphs, and new headers down the page.

Less is More
Keep the paragraphs as short as possible.

Keep the pages as short as possible.

Keep the chapters as short as possible.

Use a lot of space! Pages overloaded with text will kill your audience.

If you have a lot to say, break your information into smaller chunks and place it on different pages!

Navigation
Create a consistent navigation structure that is used by all the pages in your Web site.

Don't use hyperlinks inside paragraphs, to send visitors to every page of your Web. This will destroy
the feeling of a consistent navigation structure.

If you must use hyperlinks, add them to the bottom of a paragraph, or to the menu.

Download Speed
Sometimes developers are not aware of the fact that some pages take a long time to download.

Most visitors will leave a Web page that takes more than 7 seconds to download.

Test your web pages over a low-speed modem connection. If your pages take a long time to
download, consider removing graphic or multimedia content.

Let your Audience Speak!

Feedback is a very good thing!

Your visitors are your "customers". Often they will give you some valuable hints about what you could
have done better.

Provide a simple way to reach you, and you will get a lot of input from people with different skills and
knowledge.

Your visitors use different hardware and software.

The important thing is to KNOW YOUR AUDIENCE.

Visitor's Monitor
Not everyone on the internet has the same monitor as you.

If you design a Web site to be displayed on a monitor with a 1024x768 resolution, visitors with lower
resolution monitors (like 800x600) might have problems reading your pages.

Make sure you test your Web site on different monitors.

What Browsers Do They Use?

Don't forget to test your Web site on different browsers.

The most popular browsers today are Internet Explorer and Firefox.

One wise thing to do when designing Web pages is to use correct HTML (or XHTML). Strict and correct
coding will help a browser to display your pages correctly.

What Plug-Ins Do They Have?

Sound, video clips, or other multimedia content might require the use of separate programs (plug-
ins).

Be sure that your visitors have access to the software needed to view them.

What About Disabilities?

Some people have viewing or hearing disabilities.

They might try to read your pages with Braille or speech-based browsers. Always add text alternatives
for pictures and graphic elements.

Web standards make Web development easier.

Why Web Standards?

To make internet a better place, for both developers and end-users, it is important that both browsers
and Web developers follow the Web standards.

When developers follow the Web standards, the development is simplified, since it is easier for a
developer to understand another's coding.

Using Web standards will help you to ensure that all browsers, will display your Web site properly,
without frequent and time-consuming rewrites.

Web pages that conforms to the standard are easier for search engines to access and index, easier to
convert to other formats, and easier to access with program code (like JavaScript and the DOM).

Tip: Make a habit of validating your pages with a validation service. Validation keeps your documents
up to the standards, and free for errors.

Accessibility
Accessibility is an important part of the HTML standard.

Web standards make it easier for people with disabilities to use the Web.

Blind people can use computers that read Web pages for them. People with poor sight can rearrange
and magnify standard Web pages. Simple Web standards like HTML 4 and CSS, will make your Web
pages much easier to understand by special devices.

W3C - The World Wide Web Consortium

W3C creates the Web standards.

W3C, founded in 1994, is an international consortium dedicated to "lead the Web to its full potential".

As developers, especially when creating educational Web sites, we can help them turn this dream into
reality.

ECMA - European Computer Manufacturers Association

ECMA, founded in 1961, in order to meet the need for standardizing computer languages and
input/output codes.

ECMA is not an official standardization institute, but an association of companies that collaborate with
other official institutes like the International Organization for Standardization (ISO) and the European
Telecommunications Standards Institute (ETSI).

For Web developers, the most important standard is ECMAScript, the standardization of
JavaScript.

With JavaScript, DOM objects can then be added, deleted, or changed.

The World Wide Web Consortium (W3C) creates the WWW standards.

W3C's mission is to lead the Web to its full potential, which it does by developing
specifications, guidelines, software, and tools.

PHP Introduction
PHP is a server-side scripting language.

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML/XHTML
• JavaScript

What is PHP?
• PHP stands for PHP: Hypertext Preprocessor
• PHP is a server-side scripting language, like ASP
• PHP scripts are executed on the server
• PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic
ODBC, etc.)
• PHP is an open source software
• PHP is free to download and use

What is a PHP File?

• PHP files can contain text, HTML tags and scripts
• PHP files are returned to the browser as plain HTML
• PHP files have a file extension of ".php", ".php3", or ".phtml"

What is MySQL?
• MySQL is a database server
• MySQL is ideal for both small and large applications
• MySQL supports standard SQL
• MySQL compiles on a number of platforms
• MySQL is free to download and use

PHP + MySQL
• PHP combined with MySQL are cross-platform (you can develop in Windows and serve on a
Unix platform)

Why PHP?
 • PHP runs on different platforms (Windows, Linux, Unix, etc.)
• PHP is compatible with almost all servers used today (Apache, IIS, etc.)
• PHP is FREE to download from the official PHP resource: www.php.net
• PHP is easy to learn and runs efficiently on the server side

Where to Start?
To get access to a web server with PHP support, you can:

• Install Apache (or IIS) on your own server, install PHP, and MySQL
• Or find a web hosting plan with PHP and MySQL support

What is HTML?
HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language

• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags
• HTML uses markup tags to describe web pages

HTML Tags
HTML markup tags are usually called HTML tags

• HTML tags are keywords surrounded by angle brackets like <html>

• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and
display them as web pages. The browser does not display the HTML tags, but uses the tags to
interpret the content of the page:

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained
• The text between <html> and </html> describes the web page
• The text between <body> and </body> is the visible page content
• The text between <h1> and </h1> is displayed as a heading
• The text between <p> and </p> is displayed as a paragraph

What is CSS?
• CSS stands for Cascading Style Sheets
 • Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

CSS Demo
An HTML document can be displayed with different styles: See how it works

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large web sites, where fonts and color information
were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS
file.

All browsers support CSS today.

CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed.

Styles are normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in a Web site, just by editing one single file!

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

CSS Example
CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly
brackets:
p {color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line, like this:

Example

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

Try it yourself »

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later
date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External style sheet

• Internal style sheet
• Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section:

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

An external style sheet can be written in any text editor. The file should not contain any html tags.
Your style sheet should be saved with a .css extension. An example of a style sheet file is shown
below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of
"margin-left:20px") will work in IE, but not in Firefox or Opera.
 Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section of an HTML page, by using the <style> tag, like this:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use
this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any
CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align:right;
font-size:20pt;
}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will
be:

color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.
Multiple Styles Will Cascade into One
Styles can be specified:

• inside an HTML element

• inside the head section of an HTML page
• in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

Cascading order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the
following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override
a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

All CSS Background Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS

background Sets all the background properties background-color 1
in one declaration background-image
background-repeat
background-attachment
background-position
inherit
background-attachment Sets whether a background image scroll 1
is fixed or scrolls with the rest of fixed
the page inherit
background-color Sets the background color of an color-rgb 1
element color-hex
color-name
transparent
inherit
background-image Sets the background image for an url(URL) 1
element none
inherit
background-position Sets the starting position of a left top 1
background image left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit
background-repeat Sets if/how a background image will repeat
be repeated repeat-x
repeat-y
 no-repeat
inherit

Introduction to XML
XML was designed to transport and store data.

HTML was designed to display data.

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML
• JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

What is XML?
• XML stands for EXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to carry data, not to display data
• XML tags are not predefined. You must define your own tags
• XML is designed to be self-descriptive
• XML is a W3C Recommendation

The Difference Between XML and HTML

XML is not a replacement for HTML.

XML and HTML were designed with different goals:

• XML was designed to transport and store data, with focus on what data is
• HTML was designed to display data, with focus on how data looks

HTML is about displaying information, while XML is about carrying information.

XML Does Not DO Anything

Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure,
store, and transport information.

The following example is a note to Tove, from Jani, stored as XML:

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The note above is quite self descriptive. It has sender and receiver information, it also has a heading
and a message body.

But still, this XML document does not DO anything. It is just information wrapped in tags. Someone
must write a piece of software to send, receive or display it.
With XML You Invent Your Own Tags
The tags in the example above (like <to> and <from>) are not defined in any XML standard. These
tags are "invented" by the author of the XML document.

That is because the XML language has no predefined tags.

The tags used in HTML are predefined. HTML documents can only use tags defined in the HTML
standard (like <p>, <h1>, etc.).

XML allows the author to define his/her own tags and his/her own document structure.

XML is Not a Replacement for HTML

XML is a complement to HTML.

It is important to understand that XML is not a replacement for HTML. In most web applications, XML
is used to transport data, while HTML is used to format and display the data.

My best description of XML is this:

XML is a software- and hardware-independent tool for carrying information.

XML is a W3C Recommendation

XML became a W3C Recommendation February 10, 1998.

To read more about the XML activities at W3C, please read our W3C Tutorial.

XML is Everywhere
XML is now as important for the Web as HTML was to the foundation of the Web.

XML is the most common tool for data transmissions between all sorts of applications.

How Can XML be Used?

XML is used in many aspects of web development, often to simplify data storage
and sharing.

XML Separates Data from HTML

If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML
each time the data changes.

With XML, data can be stored in separate XML files. This way you can concentrate on using HTML for
layout and display, and be sure that changes in the underlying data will not require any changes to
the HTML.

With a few lines of JavaScript code, you can read an external XML file and update the data content of
your web page.

XML Simplifies Data Sharing

In the real world, computer systems and databases contain data in incompatible formats.

XML data is stored in plain text format. This provides a software- and hardware-independent way of
storing data.
 This makes it much easier to create data that can be shared by different applications.

XML Simplifies Data Transport

One of the most time-consuming challenges for developers is to exchange data between incompatible
systems over the Internet.

Exchanging data as XML greatly reduces this complexity, since the data can be read by different
incompatible applications.

XML Simplifies Platform Changes

Upgrading to new systems (hardware or software platforms), is always time consuming. Large
amounts of data must be converted and incompatible data is often lost.

XML data is stored in text format. This makes it easier to expand or upgrade to new operating
systems, new applications, or new browsers, without losing data.

XML Makes Your Data More Available

Different applications can access your data, not only in HTML pages, but also from XML data sources.

With XML, your data can be available to all kinds of "reading machines" (Handheld computers, voice
machines, news feeds, etc), and make it more available for blind people, or people with other
disabilities.

XML is Used to Create New Internet Languages

A lot of new Internet languages are created with XML.

Here are some examples:

• XHTML
• WSDL for describing available web services
• WAP and WML as markup languages for handheld devices
• RSS languages for news feeds
• RDF and OWL for describing resources and ontology
• SMIL for describing multimedia for the web

If Developers Have Sense

If they DO have sense, future applications will exchange their data in XML.

The future might give us word processors, spreadsheet applications and databases that can read each
other's data in XML format, without any conversion utilities in between.

XML Syntax Rules

The syntax rules of XML are very simple and logical. The rules are easy to learn,
and easy to use.

All XML Elements Must Have a Closing Tag

In HTML, elements do not have to have a closing tag:

<p>This is a paragraph
<p>This is another paragraph
 In XML, it is illegal to omit the closing tag. All elements must have a closing tag:

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

Note: You might have noticed from the previous example that the XML declaration did not have a
closing tag. This is not an error. The declaration is not a part of the XML document itself, and it has no
closing tag.

XML Tags are Case Sensitive

XML tags are case sensitive. The tag <Letter> is different from the tag <letter>.

Opening and closing tags must be written with the same case:

<Message>This is incorrect</message>
<message>This is correct</message>

Note: "Opening and closing tags" are often referred to as "Start and end tags". Use whatever you
prefer. It is exactly the same thing.

XML Elements Must be Properly Nested

In HTML, you might see improperly nested elements:

<b><i>This text is bold and italic</b></i>

In XML, all elements must be properly nested within each other:

<b><i>This text is bold and italic</i></b>

In the example above, "Properly nested" simply means that since the <i> element is opened inside
the <b> element, it must be closed inside the <b> element.

XML Documents Must Have a Root Element

XML documents must contain one element that is the parent of all other elements. This element is
called the root element.

<root>
<child>
<subchild>.....</subchild>
</child>
</root>

XML Attribute Values Must be Quoted

XML elements can have attributes in name/value pairs just like in HTML.

In XML, the attribute values must always be quoted.

Study the two XML documents below. The first one is incorrect, the second is correct:

<note date=12/11/2007>
<to>Tove</to>
<from>Jani</from>
</note>
<note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>

The error in the first document is that the date attribute in the note element is not quoted.

Entity References
Some characters have a special meaning in XML.

If you place a character like "<" inside an XML element, it will generate an error because the parser
interprets it as the start of a new element.

This will generate an XML error:

<message>if salary < 1000 then</message>

To avoid this error, replace the "<" character with an entity reference:

<message>if salary &lt; 1000 then</message>

There are 5 predefined entity references in XML:

&lt; < less than

&gt; > greater than
&amp; & ampersand
&apos; ' apostrophe
&quot; " quotation mark

Note: Only the characters "<" and "&" are strictly illegal in XML. The greater than character is legal,
but it is a good habit to replace it.

Comments in XML
The syntax for writing comments in XML is similar to that of HTML.

<!-- This is a comment -->

White-space is Preserved in XML

HTML truncates multiple white-space characters to one single white-space:

HTML: Hello Tove

Output: Hello Tove

With XML, the white-space in a document is not truncated.

XML Stores New Line as LF

In Windows applications, a new line is normally stored as a pair of characters: carriage return (CR)
and line feed (LF). In Unix applications, a new line is normally stored as an LF character. Macintosh
applications also use an LF to store a new line.

XML stores a new line as LF.

JavaScript Introduction
JavaScript is the most popular scripting language on the internet, and works in all
major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML / XHTML

What is JavaScript?
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute without preliminary
compilation)
• Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the same?

NO!

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming language
- in the same category as C and C++.

What can a JavaScript do?

• JavaScript gives HTML designers a programming tool - HTML authors are normally not
programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone
can put small "snippets" of code into their HTML pages
• JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
• JavaScript can react to events - A JavaScript can be set to execute when something
happens, like when a page has finished loading or when a user clicks on an HTML element
• JavaScript can read and write HTML elements - A JavaScript can read and change the
content of an HTML element
• JavaScript can be used to validate data - A JavaScript can be used to validate form data
before it is submitted to a server. This saves the server from extra processing
• JavaScript can be used to detect the visitor's browser - A JavaScript can be used to
detect the visitor's browser, and - depending on the browser - load another page specifically
designed for that browser
• JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve
information on the visitor's computer

JavaScript Where To
JavaScripts can be put in the body and in the head sections of an HTML page.

Where to Put the JavaScript

JavaScripts in a page will be executed immediately while the page loads into the browser. This is not
always what we want. Sometimes we want to execute a script when a page loads, or at a later event,
such as when a user clicks a button. When this is the case we put the script inside a function, you will
learn about functions in a later chapter.
Scripts in <head>
Scripts to be executed when they are called, or when an event is triggered, are placed in functions.

Put your functions in the head section, this way they are all in one place, and they do not interfere
with page content.

Example

<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
</body>
</html>

Try it yourself »

Scripts in <body>
If you don't want your script to be placed inside a function, or if your script should write page content,
it should be placed in the body section.

Example

<html>
<head>
</head>

<body>
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>

</html>

Try it yourself »

Scripts in <head> and <body>

You can place an unlimited number of scripts in your document, so you can have scripts in both the
body and the head section.

Example

<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>

</html>

Try it yourself »

Using an External JavaScript

If you want to run the same JavaScript on several pages, without having to write the same script on
every page, you can write a JavaScript in an external file.

Save the external JavaScript file with a .js file extension.

Note: The external script cannot contain the <script></script> tags!

To use the external script, point to the .js file in the "src" attribute of the <script> tag:

Example

<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>

Try it yourself »

Note: Remember to place the script exactly where you normally would write the script!

ASP Introduction
An ASP file can contain text, HTML tags and scripts. Scripts in an ASP file are
executed on the server.

What you should already know

Before you continue you should have some basic understanding of the following:

• HTML / XHTML
• A scripting language like JavaScript or VBScript

If you want to study these subjects first, find the tutorials on our Home page.

What is ASP?
• ASP stands for Active Server Pages
• ASP is a Microsoft Technology
• ASP is a program that runs inside IIS
• IIS stands for Internet Information Services
• IIS comes as a free component with Windows 2000
• IIS is also a part of the Windows NT 4.0 Option Pack
 • The Option Pack can be downloaded from Microsoft
• PWS is a smaller - but fully functional - version of IIS
• PWS can be found on your Windows 95/98 CD

ASP Compatibility
• To run IIS you must have Windows NT 4.0 or later
• To run PWS you must have Windows 95 or later
• ChiliASP is a technology that runs ASP without Windows OS
• InstantASP is another technology that runs ASP without Windows

What is an ASP File?

• An ASP file is just the same as an HTML file
• An ASP file can contain text, HTML, XML, and scripts
• Scripts in an ASP file are executed on the server
• An ASP file has the file extension ".asp"

How Does ASP Differ from HTML?

• When a browser requests an HTML file, the server returns the file
• When a browser requests an ASP file, IIS passes the request to the ASP engine. The ASP
engine reads the ASP file, line by line, and executes the scripts in the file. Finally, the ASP file
is returned to the browser as plain HTML

What can ASP do for you?

• Dynamically edit, change, or add any content of a Web page
• Respond to user queries or data submitted from HTML forms
• Access any data or databases and return the results to a browser
• Customize a Web page to make it more useful for individual users
• The advantages of using ASP instead of CGI and Perl, are those of simplicity and speed
• Provide security - since ASP code cannot be viewed from the browser
• Clever ASP programming can minimize the network traffic

Note: Because ASP scripts are executed on the server, the browser that displays the ASP file does
not need to support scripting at all!

Introduction to SQL
SQL is a standard language for accessing and manipulating databases.

What is SQL?
• SQL stands for Structured Query Language
• SQL lets you access and manipulate databases
• SQL is an ANSI (American National Standards Institute) standard

What Can SQL do?

• SQL can execute queries against a database
• SQL can retrieve data from a database
• SQL can insert records in a database
• SQL can update records in a database
• SQL can delete records from a database
• SQL can create new databases
• SQL can create new tables in a database
• SQL can create stored procedures in a database
 • SQL can create views in a database
• SQL can set permissions on tables, procedures, and views

SQL is a Standard - BUT....

Although SQL is an ANSI (American National Standards Institute) standard, there are many different
versions of the SQL language.

However, to be compliant with the ANSI standard, they all support at least the major commands (such
as SELECT, UPDATE, DELETE, INSERT, WHERE) in a similar manner.

Note: Most of the SQL database programs also have their own proprietary extensions in addition to
the SQL standard!

Using SQL in Your Web Site

To build a web site that shows some data from a database, you will need the following:

• An RDBMS database program (i.e. MS Access, SQL Server, MySQL)

• A server-side scripting language, like PHP or ASP
• SQL
• HTML / CSS

RDBMS
RDBMS stands for Relational Database Management System.

RDBMS is the basis for SQL, and for all modern database systems like MS SQL Server, IBM DB2,
Oracle, MySQL, and Microsoft Access.

The data in RDBMS is stored in database objects called tables.

SQL Syntax
Database Tables
A database most often contains one or more tables. Each table is identified by a name (e.g.
"Customers" or "Orders"). Tables contain records (rows) with data.

Below is an example of a table called "Persons":

P_Id LastName FirstName Address City

1 Hansen Ola Timoteivn 10 Sandnes

2 Svendson Tove Borgvn 23 Sandnes

3 Pettersen Kari Storgt 20 Stavanger

The table above contains three records (one for each person) and five columns (P_Id, LastName,
FirstName, Address, and City).

SQL Statements
Most of the actions you need to perform on a database are done with SQL statements.

The following SQL statement will select all the records in the "Persons" table:
SELECT * FROM Persons

Keep in Mind That...

• SQL is not case sensitive

Semicolon after SQL Statements?

Some database systems require a semicolon at the end of each SQL statement.

Semicolon is the standard way to separate each SQL statement in database systems that allow more
than one SQL statement to be executed in the same call to the server.

We are using MS Access and SQL Server 2000 and we do not have to put a semicolon after each SQL
statement, but some database programs force you to use it.

SQL DML and DDL

SQL can be divided into two parts: The Data Manipulation Language (DML) and the Data Definition
Language (DDL).

The query and update commands form the DML part of SQL:

• SELECT - extracts data from a database

• UPDATE - updates data in a database
• DELETE - deletes data from a database
• INSERT INTO - inserts new data into a database

The DDL part of SQL permits database tables to be created or deleted. It also define indexes (keys),
specify links between tables, and impose constraints between tables. The most important DDL
statements in SQL are:

• CREATE DATABASE - creates a new database

• ALTER DATABASE - modifies a database
• CREATE TABLE - creates a new table
• ALTER TABLE - modifies a table
• DROP TABLE - deletes a table
• CREATE INDEX - creates an index (search key)
• DROP INDEX - deletes an index