html and css web programming, form validations with javascript and php

HTML Tutorials

Easy to learn Basic HTML Programming

HTML (Hypertext MarkUP

Language)

l HTML is the

lingua franca

for publishing hypertext on the

World Wide Web

l Define tags <html><body> <head>….etc

l Allow to embed other scripting languages to manipulate

design layout, text and graphics

l Platform independent

l Current version is 4.x and in February W3C released the

first draft of a test suite 4.01

l For more info: http://www.w3.org/MarkUp/

HTML (Hypertext Markup Language)

l Example HTML code:

<HTML>

<head>

<title>Hello World</title>

</head>

<H1>Hello World</H1>

</font>

</body>

</HTML>

HTML (Hypertext Markup Language)

l Common features

– Tables

– Frame

– Form

– Image map

– Character Set

– Meta tags

– Images, Hyperlink, etc…

HTML (Hypertext Markup Language)

l File Extensions:

HTML, HTM

l Recent recommendation of W3C is XHTML 1.0

combines the strength of HTML 4 with the

power of XML.

l XHTML 1.0 is the first major change to HTML

since HTML 4.0 was released in 1997

l More info: http://www.w3.org/TR/xhtml1/

CSS (Cascading Style Sheet)

l Simple mechanism for adding style to web page

l Code be embedded into the HTML file

l HTML tag:

l Also be in a separate file FILENAME.css

l HTML tag:

l Style types mainly include:

• Font

• Color

• Spacing

CSS (Cascading Style Sheet)

l Controls format:

– Font, color, spacing

– Alignment

– User override of styles

– Aural CSS (non sighted user and voice-browser)

– Layers

l Layout

l User Interface

CSS (Cascading Style Sheet)

l Client’s browser dependable

l Example code:

p,h1,h2 {

margin-top:0px;

margin-bottom:100px;padding:20px 40px 0px 40px;

}

l More info:

http://www.w3.org/Style/CSS/

http://www.w3schools.com/css/css_intro.asp

CSS (Cascading Style Sheet)

<HTML>

<head>

<title>Hello World</title>

p,h1,h2 {

margin-top:0px;

margin-bottom:100px;padding:40px 40px 0px 40px;

}

</style>

</head>

<h1>Hello World<h1>

</font>

</body>

</HTML>

CSS (Cascading Style Sheet)

HTML without CSS

JavaScript

l Compact object-based scripting language

l Code be embedded into HTML file

l HTML tag

l Also be in a separate file FILENAME.js

l HTML tag

<SCRIPT LANGUAGE="JavaScript"

SRC=“FILENAME.js"></SCRIPT>

JavaScript

l Main objectives:

User interface, CGI capabilities without involving server

l Client side compilation

l Server provides no support

l Security hazard for client’s computer

l SCS websites JavaScript's Examples

http://www.cs.cmu.edu

VBScripts

l Microsoft’s share of scripting language

l Similar objectives as JavaScript and any other

scripting language

l Similar to Visual Basic

l VBScript is integrated with WWW and web

browsers

l Other Microsoft developer tools

PHP (

Hypertext Preprocessor

)

l PHP- HTML-embedded scripting language

l Syntax looks like C, JAVA, and PERL

l File extension: FILENAME.php

l Main Objective:

• Generate Dynamic content

• User Interface

l Server side loadable module

l Server side execution

l Current version and release: 4.3.x

l More info: http://www.php.net

PHP (

Hypertext Preprocessor

)

l Sample Code

<HTML>

PHP Sample Code</title></head>

This is a PHP TEST</h1>

<p>

<?php

$cnt=0;

while($cnt <= 4)

{ $cnt++;

echo "Hello World<P>"; }

</body></HTML>

PHP (

Hypertext Preprocessor

)

PHP (

Hypertext Preprocessor

)

l PHP is getting really popular in the web developers

community

l ODBC support

l PHP developer community think this is the web future

l SCS Undergraduate sites; done in PHP:

http://www.ugrad.cs.cmu.edu/

l Drawback:

• Security

• Easy manipulation of code for hackers

CGI (Common Gateway Interface)

l Standard for external gateway programs to

interface with information servers such as HTTP

servers

l Real-time execution

l Main Objective:

• Dynamic Content

• User Interface

l Current version 1.1

CGI (Common Gateway Interface)

l Various choice in Programming language

selections

C, C++, PERL, Python

l PERL; most popular and widely used

l Server side execution

l Script runs as a stand alone process unlike PHP

l Basic difference with PHP is the execution

approach

PERL (Practical Extraction and Report

Language)

l Commonly used PERL Libraries (Modules):

• CGI.pm

• DB.pm

• DBI.pm

• CPAN.pm

• Mysql.pm

l More on PERL Libraries:

• http://www.perl.com/CPAN-local/README.html

• http://www.perl.com

• http://www.perl.org

PERL (Practical Extraction and Report

Language)

l Sample PERL code:

#!/usr/local/bin/perl5.6.1

## printenv -- demo CGI program which just prints its environment

print "Content-type: text/plain\n\n";

foreach $var (sort(keys(%ENV))) {

$val = $ENV{$var};

$val =~ s|\n|\\n|g;

$val =~ s|"|\\"|g;

print "${var}=\"${val}\"\n";

}

l https://superman.web.cs.cmu.edu/cgi-bin/printenv

PERL (Practical Extraction and Report

Language)

l More Example of PERL CGI Scripts:

• http://calendar.cs.cmu.edu/scsEvents/submit.html

• http://calendar.cs.cmu.edu/scs/additionalSearch

l Drawback:

• Security

• Easy manipulation of code for hackers

Mod_PERL (PERL Module for Apache)

l Module that brings together the power of PERL and

Apache HTTP server

l PERL interpreter embedded in Web Server

l Can provide 100x speedups for CGI scripts execution due

to Apache::Registry module

l Reduce load on server

l Less coordination of server process

l More info:

• http://perl.apache.org/

• http://www.modssl.org/docs/2.8/ssl_intro.html

Secured Web Server (HTTPS,

MOD_SSL)

l Provide strong cryptography for web server

l Mod_ssl is the module for Apache to enable

encrypted web connection

l Use Secured Socket Layer (SSL v2/v3) and

Transport Layer Security

l Two categories of cryptographic algorithms

• Conventional (Symmetric)

• Public Key (Asymmetric)

Secured Web Server (HTTPS,

MOD_SSL)

l Conventional or Symmetric

• Sender and Receiver share a key

l Public key or Asymmetric

• Solve the key exchange issue

l Certificate

• A certificate associates a public key with the real identity of an

individual, server

• Includes the identification and signature of the Certificate

Authority that issued the certificate

Secured Web Server (HTTPS,

MOD_SSL)

WebISO (Initial Sign-on and

Pubcookie)

l One time authentication process

l Typically username/password-based central

authentication

l Use standard web browser

l Eventually the session time-out

l Commonly uses double encryption

WebISO (Initial Sign-on and

Pubcookie)

l Pubcookie

Main Model:

l User-Agent: Web browsers

l Authentication Service:

Kerberos, LDAP, NIS

l Example:

https://wonderwoman.web.cs.cmu.edu/Reports

WebISO (Initial Sign-on and

Pubcookie)

l Web cookies are simply bits of software placed on

your computer when you browse websites

l WebISO (Pubcookie) use cookie implementation

to keep track of a user

l Drawback:

Security

Kerberos

l Network authentication protocal

l Developed in MIT

l Strong cryptography

l Private (shared) key

l Use ticket to authenticate

l Never sends password over the network

l Single sign-on approach for network

authentication

Database Technology (MYSQL)

l Database driven backend infrastructure

l Content is independent from design

l CGI and PHP are widely used

l Provide the flexibility of data storage

l Popular database for web systems:

MYSQL, MSQL, Cold Fusion, MS-ACCESS, ORACLE

l SCS database driven sites USE MYSQL

l Example of SCS database driven sites

Database Technology (MYSQL)

l Great database package for handling text

l Drawback

– View

– Multi-master replication

– Locking

– Support for sub quires

– Character set handling

l More info: http://www.mysql.com

XML XSLT (Extensible Stylesheet

Language Transformations)

l XSLT is designed for use as part of XSL

l Stylesheet language for XML

l XSLT is also designed to be used independently

of XSL

l Work under the umbrella of XML

l Example:

http://wonderwoman.web.cs.cmu.edu:8888/xml/

JAVA Applets

l Precompiled code

l Included in HTML page

l HTML tag:

<applet code=FILENAME.class>LIST OF

PARAMETER</applet>

l The class is executed by clients browser’s JVM (Java

Virtual Machine)

l JAR (Java Archive) Bundle multiple files into a single

archive file

l More info: http://java.sun.com/applets/

Flash

l Multimedia web development

l Audio, video, animation really flashy web content

l 3D graphics

l More info:

http://www.macromedia.com/devnet/mx/flash/

l SCS Web site (Flash):

http://www.cs.cmu.edu/fla/

l Performance on low bandwidth is an issue

Server, Web Server, Load balancing

l Servers

SUN, High-end INTEL

l Operating Systems:

Solrais, Linux, Windows

l Web Server

Apache, IIS, Enterprise, SUN ONE

l Load Balancing

Commercial vs Non-commercial product

VoiceXML (Voice Extensible Markup

Language)

l Designed for creating

• Audio Dialog that feature synthesized speech

• Digitized audio

• Recognition of spoken and DTMF(Dual-tone-multi-

frequency) key input

• Recording of spoken input

• Telephony

• Mixed initiative conversation

http://www.w3.org/TR/voicexml20/

http://www.voicexml.org/

List of Useful Links

http://www.w3.org/MarkUp/

http://www.w3.org/Style/CSS/

http://www.w3schools.com/css/css_intro.asp

http://www.php.net

http://www.perl.com/

http://www.perl.org

http://www.perl.com/CPAN-local/README.html

http://perl.apache.org

http://www.modssl.org/docs/2.8/ssl_intro.html

http://web.mit.edu/kerberos/www/

http://www.mysql.com

http://www.w3.org/TR/xslt

http://www.xml.com/pub/a/2000/08/holman/s1.html?page=2

http://java.sun.com/applets

http://www.macromedia.com/devnet/mx/flash/

http://www.w3.org/TR/voicexml20/

http://www.voicexml.org/

http://www.w3.org/TR/xhtml1/