web building introduction

8/8/2019 Web Building Introduction

1/21

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 and color attributes, were added to HTML 3.2, it started a developer'snightmare. Development of web sites where font information must be added to every single Web pageis a long and expensive job.

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

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 tag in HTML 3.2.

Style sheets are normally saved in external files. External style sheets enable you to change theappearance and layout of EVERY page in your Web site, just by editing a single document. If you haveever tried changing something like the font or color of all the headings in all your HTML pages, you willunderstand 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 transmittinginformation.

We believe that XML is as important to the Web as HTML was to the foundation of the Web, and thatXML 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.


2/21

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 todisplay, 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 willsee a huge shift from sites displaying "static content" to data driven sites delivering "dynamiccontent".

We will also see new browsers, like the browsers found in mobile devices. We will also see more use ofXML 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!


3/21

No matter how much useful information you put into a Web page, a visitor will only spend a fewseconds 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 useroccupied 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 todownload, 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 couldhave done better.

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

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 lowerresolution monitors (like 800x600) might have problems reading your pages.

Make sure you test your Web site on different monitors.

What Browsers Do They Use?


4/21

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 correctcoding 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 alternativesfor 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 browsersand 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 documentsup 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 Webpages 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 intoreality.

ECMA - European Computer Manufacturers Association


5/21

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

ECMA is not an official standardization institute, but an association of companies that collaborate withother official institutes like the International Organization for Standardization (ISO) and the EuropeanTelecommunications 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 aUnix platform)

Why PHP?


6/21

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 ofmarkup 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 tags normally come in pairs like and

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 tointerpret the content of the page:

My First Heading

My first paragraph.

Example Explained

The text between and describes the web page

The text between and is the visible page content

The text between and is displayed as a heading

The text between

and
is displayed as a paragraph
What is CSS?

CSS stands for Cascading Style Sheets
http://www.php.net/http://www.php.net/


7/21

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:

This is a heading

This is a paragraph.

When tags like , and color attributes were added to the HTML 3.2 specification, it started anightmare for web developers. Development of large web sites, where fonts and color informationwere 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 CSSfile.

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:
http://www.w3schools.com/css/demo_default.htmhttp://www.w3schools.com/css/demo_default.htm


8/21

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 laterdate. 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 stylesheet using the tag. The tag goes inside the head section:

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 shownbelow:

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.
http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1


9/21

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internalstyles in the head section of an HTML page, by using the tag, like this:

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

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Usethis method sparingly!

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

This is a paragraph.

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will beinherited 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 willbe:

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 isreplaced by the internal style sheet.


10/21

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 thefollowing rules, where number four has the highest priority:

1. Browser default2. External style sheet3. 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 overridea style defined inside the 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 orCSS2).

Property Description Values CSS

background Sets all the background propertiesin one declaration

background-colorbackground-imagebackground-repeatbackground-attachment

background-positioninherit

1

background-attachment Sets whether a background imageis fixed or scrolls with the rest ofthe page

scrollfixedinherit

1

background-color Sets the background color of anelement

color-rgbcolor-hexcolor-nametransparentinherit

1

background-image Sets the background image for anelement

url(URL)noneinherit

1

background-position Sets the starting position of abackground image

left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom

x% y%xpos yposinherit

1

background-repeat Sets if/how a background image will

be repeated

repeat

repeat-xrepeat-y
http://www.w3schools.com/css/pr_background.asphttp://www.w3schools.com/css/pr_background-attachment.asphttp://www.w3schools.com/css/pr_background-color.asphttp://www.w3schools.com/css/pr_background-image.asphttp://www.w3schools.com/css/pr_background-position.asphttp://www.w3schools.com/css/pr_background-repeat.asphttp://www.w3schools.com/css/pr_background.asphttp://www.w3schools.com/css/pr_background-attachment.asphttp://www.w3schools.com/css/pr_background-color.asphttp://www.w3schools.com/css/pr_background-image.asphttp://www.w3schools.com/css/pr_background-position.asphttp://www.w3schools.com/css/pr_background-repeat.asp


11/21

no-repeatinherit

Introduction to XML

XML was designed to transport and store data.

HTML was designed to display data.



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:

ToveJaniReminderDon't forget me this weekend!

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

But still, this XML document does not DO anything. It is just information wrapped in tags. Someonemust write a piece of software to send, receive or display it.
http://www.w3schools.com/default.asphttp://www.w3schools.com/default.asp


12/21

With XML You Invent Your Own Tags

The tags in the example above (like and ) are not defined in any XML standard. Thesetags 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 HTMLstandard (like

, , 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, XMLis 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 storageand 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 HTMLeach time the data changes.

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

With a few lines of JavaScript code, you can read an external XML file and update the data content ofyour 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.
http://www.w3schools.com/w3c/w3c_xml.asphttp://www.w3schools.com/w3c/w3c_xml.asp


13/21

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 incompatiblesystems over the Internet.

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

XML Simplifies Platform Changes

Upgrading to new systems (hardware or software platforms), is always time consuming. Largeamounts 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 operatingsystems, 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, voicemachines, news feeds, etc), and make it more available for blind people, or people with otherdisabilities.

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 eachother'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:

This is a paragraph

This is another paragraph


14/21

In XML, it is illegal to omit the closing tag. All elements must have a closing tag:

This is a paragraph

This is another paragraph

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

XML Tags are Case Sensitive

XML tags are case sensitive. The tag is different from the tag .

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

This is incorrectThis is correct

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

XML Elements Must be Properly Nested

In HTML, you might see improperly nested elements:

This text is bold and italic

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

This text is bold and italic

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

XML Documents Must Have a Root Element

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

.....

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:

ToveJani


15/21

ToveJani

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 "


16/21

JavaScript Introduction

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



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 preliminarycompilation)

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 anyonecan 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("" + name + "") can write a variable text into an HTML page

JavaScript can react to events - A JavaScript can be set to execute when somethinghappens, 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 databefore 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 specificallydesigned for that browser

JavaScript can be used to create cookies - A JavaScript can be used to store and retrieveinformation 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 notalways 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 willlearn about functions in a later chapter.


17/21

Scripts in

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 interferewith page content.

Example

function message(){alert("This alert box was called with the onload event");}

Try it yourself

Scripts in

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

document.write("This message is written by JavaScript");

Try it yourself

Scripts in and

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

Example

function message(){alert("This alert box was called with the onload event");

}
http://www.w3schools.com/js/tryit.asp?filename=tryjs_headsectionhttp://www.w3schools.com/js/tryit.asp?filename=tryjs_bodysectionhttp://www.w3schools.com/js/tryit.asp?filename=tryjs_headsectionhttp://www.w3schools.com/js/tryit.asp?filename=tryjs_bodysection


18/21

document.write("This message is written by JavaScript");

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 onevery 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 tags!

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

Example

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
http://www.w3schools.com/js/tryit.asp?filename=tryjs_headandbodyhttp://www.w3schools.com/js/tryit.asp?filename=tryjs_externalexamplehttp://www.w3schools.com/default.asphttp://www.w3schools.com/js/tryit.asp?filename=tryjs_headandbodyhttp://www.w3schools.com/js/tryit.asp?filename=tryjs_externalexamplehttp://www.w3schools.com/default.asp


19/21

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 fileis 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 doesnot 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


20/21

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 differentversions of the SQL language.

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

Note: Most of the SQL database programs also have their own proprietary extensions in addition tothe 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:


21/21

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 morethan 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 SQLstatement, 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 DefinitionLanguage (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 DDLstatements 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