Scribd
Upload
13 views

WP HTML Basics

Uploaded by

againjean
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
13 views

WP HTML Basics

Uploaded by

againjean
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 39

Web Programming

CSC 4316
Course textbook

Programming the World


Wide Web (8th Edition)
by Robert W. Sebesta.

This textbook provides a


comprehensive
introduction to the tools
and skills required for
both client- and server-
side programming.
Hypertext Markup Language
This Lesson Outline - 1

• The Nature of HTML


• History of HTML
• Elements / Structure of an HTML document
• HTML5
• Example HTML Editors
HyperText Markup
Language
HTML is the lingua franca for publishing
hypertext on the World Wide Web

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

Allow to embed other scripting languages to


manipulate design layout, text and graphics

Platform independent

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


Hypertext MarkUP
Language
Example HTML code:

<HTML>
<head>
<title>Hello World</title>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff”>
<H1>Hello World</H1>
</font>
</body>
</HTML>
Hypertext MarkUP
Language

9/3/18 8
Hypertext MarkUP
Language
Common features
– Tables
– Frame
– Form
– Image map
– Character Set
– Meta tags
– Images, Hyperlink,
etc…
9/3/18 9
Hypertext MarkUP
Language
File Extensions:
HTML, HTM
Recent recommendation of W3C is XHTML 1.0 combines
the strength of HTML 4 with the power of XML.
XHTML 1.0 is the first major change to HTML since
HTML 4.0 was released in 1997
More info: http://www.w3.org/TR/xhtml1/
CSS (Cascading Style
Sheet)
Simple mechanism for adding style to web page
Code be embedded into the HTML file
HTML tag:
<style type=“text/css”>CODE</style>
Also be in a separate file FILENAME.css
HTML tag:
<link rel=“stylesheet” href=“scs.css” type=“text/css”>
Style types mainly include:
• Font
• Color
• Spacing
CSS (Cascading Style
Sheet)
Controls format:
– Font, color, spacing
– Alignment
– User override of styles
– Aural CSS (non sighted user and voice-
browser)
– Layers
• Layout
• User Interface
CSS (Cascading Style
Sheet)
<HTML>
<head>
<title>Hello World</title>
<style type=“text/css”>
p,h1,h2 {
margin-top:0px;
margin-bottom:100px;padding:40px 40px
0px 40px;
}
</style>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff”>
<h1>Hello World<h1>
</font>
</body>
</HTML>
Database Technology
(MYSQL)

Database driven backend infrastructure


Content is independent from design
CGI and PHP are widely used.

Provide the flexibility of data storage


Popular database for web systems:
MYSQL, MSQL, Cold Fusion, MS-ACCESS, ORACLE
SCS database driven sites USE MYSQL

Example of SCS database driven sites


HTML with CSS

9/3/18 15
HTML without CSS

9/3/18 16
Javascript

Compact object-based scripting language


Code be embedded into HTML file
HTML tag
<script
language=“javascript”>CODE</script>
Also be in a separate file FILENAME.js
HTML tag
<SCRIPT LANGUAGE="JavaScript"
SRC=“FILENAME.js"></SCRIPT>
Javascript

Main objectives:
User interface, CGI capabilities without
involving server
Client side compilation
Server provides no support
Security hazard for client’s computer

9/3/18 18
VBScript

Microsoft’s share of scripting language


Similar objectives as JavaScript and any other
scripting language
Similar to Visual Basic
<SCRIPT
LANGUAGE="VBScript">CODE</script>
VBScript is integrated with WWW and web
browsers
Other Microsoft developer tools

9/3/18 19
PHP (Hypertext Preprocessor)
PHP- HTML-embedded scripting language

Syntax looks like C, JAVA, and PERL


File extension: FILENAME.php
Main Objective:
• Generate Dynamic content
• User Interface
Server side loadable module
Server side execution

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


PHP (Hypertext Preprocessor)
Sample Code:

<HTML>
<head><title>
PHP Sample Code</title></head>
<body bgcolor = "#000000">
<font color = "#ffffff"><h1>
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)

PHP is getting really popular in the web developers


community
ODBC support

PHP developer community think this is the web


future

Drawback:
• Security
• Easy manipulation of code for hackers
CGI (Common Gateway Interface)

Standard for external gateway programs to interface with


information servers such as HTTP servers
Real-time execution
Main Objective:
• Dynamic Content
• User Interface

Current version 1.1


CGI (Common Gateway Interface)

Various choice in Programming language selections


C, C++, PERL, Python
PERL; most popular and widely used
Server side execution
Script runs as a stand alone process unlike PHP
Basic difference with PHP is the execution approach
PERL (Practical Extraction
and Report Language)
Commonly used PERL Libraries (Modules):
• CGI.pm
• DB.pm
• DBI.pm
• CPAN.pm
• Mysql.pm

More on PERL Libraries:


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

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";
}
PERL

More examples of PERL scripts in the tutorial

Drawback:
• Security
• Easy manipulation of code for hackers
Mod_PERL (PERL Module for
Apache)

Module that brings together the power of PERL and Apache HTTP
server

PERL interpreter embedded in Web Server


Can provide 100x speedups for CGI scripts execution due to
Apache::Registry module
Reduce load on server
Less coordination of server process
More info:
• http://perl.apache.org/
• http://www.modssl.org/docs/2.8/ssl_intro.html

9/3/18 29
Secured Web Server
(HTTPS, MOD_SSL)

Provide strong cryptography for web server


Mod_ssl is the module for Apache to enable encrypted web
connection
Use Secured Socket Layer (SSL v2/v3) and Transport Layer
Security
Two categories of cryptographic algorithms
• Conventional (Symmetric)
• Public Key (Asymmetric)
Secured Web Server
(HTTPS, MOD_SSL)

Conventional or Symmetric
• Sender and Receiver share a key

Public key or Asymmetric


• Solve the key exchange issue

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)

One time authentication process


Typically username/password-based central authentication
Use standard web browser
Eventually the session time-out
Commonly uses double encryption
WebISO (Initial Sign-on and
Pubcookie)

Pubcookie
Main Model:

User-Agent: Web browsers


Authentication Service:
Kerberos, LDAP, NIS

Example:
https://wonderwoman.web.cs.cmu.edu/Reports
WebISO (Initial Sign-on and
Pubcookie)
Cookies

Web cookies are simply bits of software placed on your computer when you
browse websites

WebISO (Pubcookie) use cookie implementation to keep track of a user


Drawback:

Security
Database Technology
(MYSQL)

Great database package for handling text


Drawback
– View
– Multi-master replication
– Locking
– Support for sub quires
– Character set handling
More info: http://www.mysql.com
XML XSLT
(Extensible Stylesheet Language
Transformations)
XSLT is a language for transforming XML documents
into other XML documents or other formats such as
HTML for web pages or plain text.

XSLT is designed for use as part of XSL


Stylesheet language for XML

XSLT is also designed to be used independently of XSL


Work under the umbrella of XML

Example:
Java Applets

Precompiled code
Included in HTML page
HTML tag:
<applet code=FILENAME.class>LIST OF
PARAMETER</applet>

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


Virtual Machine)

JAR (Java Archive) Bundle multiple files into a single


archive file
More info: http://java.sun.com/applets/

You might also like