 |
INTRODUCTION TO ADVANCED WEB DESIGN
Part I : Adding Behavior to Web Pages
Differences between javascript, html and server-side scripting (ASP, PHP, ..) :
- HTML is a markup (descriptive) language used to put up static
pages.
- JavaScript is programming language that can be embedded into
HTML to create 'smart' web pages. You can then interact with the
user, add special effects, check forms, and more. It's a client-side
language, it executes from within the browser (client) rather than
on the web server.
- ASP, PHP, and other server-side scripting languages are programming
languages that are used to generate content, HTML tags or Javascript
dynamicaly. The code is usually mixed with static html/javascript
content It's server-side because the web server executes the code
before serving the page to the browser. The DePauw web server uses
ASP, while server-side scripting is not available on the ACAD server.
Some examples of what you can do with javascript
Opening pages in customized windows, where you
specify if the browser's buttons, menu line, status line or
whatever should be present.
in Javascript :
window.open('http://www.depauw.edu','DePauw','toolbar=no,location=no,directories=yes,'+
'status=no,menubar=no,scrollbars=yes,resizable=no,width=600,height=480';);
Test
Compares with the HTML equivalent :
<a href="http://www.depauw.edu" target="_blank">Go
to DePauw</a>
Test
Advanced javascript behaviors: University
Event Calendar, Javascript controls the size and position
of each event and add a rollover effect to display details
about an event. (javascript
source code)
- Obtain User's Browser Information
Detecting the browser used by a visitor on your page. Knowing
where he comes from, what was
the query entered if he came from a search engine , what type
of computer he's using, etc... (example)
- Save information on the user's computer (Cookies)
Storing information on the visitor's computer, then retrieving
this information automatically next time the user visits your
page. This technique is called "cookies".
- Validate Forms
Validating inputs to fields before submitting
a form.
An example would be validating the entered email address to see if
it has an @ in it, since if not, it's not a valid address.
Javascript Tutorials & Examples
http://www.webdeveloper.com/javascript/javascript_js_tutorial.html
http://www.w3schools.com/js/js_examples.asp
http://javascript.internet.com/
Part II : Separating content and presentation : HTML & CSS
HTML was originaly designed to describe content, not to format it.
- <H1>, <A> or <P> for example are descriptives
tags, how they are actually rendered is up to the browser.
CSS (Cascading Style Sheet) is an improved way to control the display
of HTML elements.
- <STYLE TYPE="text/css">
<!--a { text-decoration: none; color: #71003C }-->
<!--a:hover { text-decoration: underline; color: #6AEF22 }-->
</STYLE>
See: w3schools.com/css
Part III : HTML Header, why it matters
In the HTML header, you usualy find <TITLE> and <META> Tags.
A meaningful and accurate <title> helps for:
- a better ranking in search engines.
- useful window and bookmark titles
<meta> tags serves a lot of different purposes.
- description and keywords meta-tags helps also for a better ranking
in search engines.
- the content-type meta-tag specifies the browser what character
set should be used to render the page (arabic, western, chinese,
...).
- the robots meta-tag is intended to give directives to search
engines and other web bots to index or ignore the page for example
On the first line of a web page, you may also find a !DOCTYPE directive,
which tells the browser what 'web' language you're using : HTML 3.x,
HTML 4.x, XHTML 1.x, XML ...
If you don't specify a doctype, the browser will usually assume
that you're using an old version of the HTML language (3.x) and render
the page accordingly. Changing the doctype has often noticeable effects
on the rendering of your page (especially in standard-compliant browsers
like netscape, opera, etc...).
|
