CSE1041 Week 1 Lecture

Introduction to www & Web 
Introduction 
Introduction to 
to www & Web 
www & Web
Technologies

Jan 2013

Module Information
Module Information
• 50% Continuous Assessment:
50% Continuous Assessment:
– Test ‐25%
– Assignment –
Assignment 25% [Evaluation –
25% [Evaluation twice. Details 
twice Details
provided in Assignment]
– Lab Work –
Lab Work – Mainly Group Assignment [2 persons]
Mainly Group Assignment [2 persons]
• 50% Exams
• Case Studies for different topics introduced
d f d ff d d
• Strongly to look for other examples
 Syllabus
• Basic Concepts of Web Technologies
Basic Concepts of Web Technologies
• HTML
• CSS
• Javascript
• DHTML
• PHP
• AJAX

Some definitions
– Internet and World Wide Web
– Browsers
– Protocols
• HTTP, HTTPS
, S
• FTP
• POP, SMTP
• TCP/IP 
TCP/IP
• IPV4
– Four sets of numbers (0‐255) separated by .
– 168.156.125.25
– If we need more addresses, how do we manage?
• IPV6
– 128 bit address
– Static Pages (HTML)
S i P (HTML)
– Dynamic Pages
• Client side (Vbscript, javascript)
• Server Side (ASP, PHP, Cold Fusion)
• Web Servers (IIS, Apache)
• Application Servers
• Search Engines
 Rough Timeline of Web Technologies 
• 1991 HTML
• 1994 HTML 2
• 1996 CSS 1 + JavaScript
1996 CSS 1 + JavaScript
• 1997 HTML 4
• 1998 CSS 2
• 2000 XHTML 1
• 2002 Tableless Web Design
• 2005 AJAX
• 2009 HTML 5 *

* Chk link below for HTML5 Presentation:
http://slides.html5rocks.com/#timeline‐slide

Introduction to Web Technologies
• Static page
Request
Brows Request
Internet
er Di k
Disk
Respons
Respons
e
e
Web
Serve
r
•Browser
B sends
d requestt (HTTP)
•Web Server sends response
•Browser Displays page
6
 Introduction to Web Technologies
• Dynamic page (Server Processing only)

Request
Brows Request
Internet Disk/
er
Respons Database
b
Respons
e
e
Web
•Browser sends in request Server/
•Web Server contacts Application Server Applicati
•Application Server processes codes and formats data on
Server
•Web Server sends response to browser
•Browser Displays page
7

Introduction to Web Technologies
• Dynamic page (Client and Server Processing)

Request
Brows Request
Internet Disk/
er
Respons Database
b
Respons
e
e
Web
•Browser sends in request Server/
•Web Server contacts Application Server Applicati
on
•Application Server processes codes and formats data
Server
•Web Server sends response to browser
•Browser Processes Client Codes/Displays page
8
 Introduction to Web Technologies
• AJAX Programming (Asynchronous Client and Server 
Processing)
Request
Brows Request
Internet Disk/
er
Respons Database
b
Respons
e
e
Web
•Browser sends HTTP request Server/
•Web Server contacts Application Server Applicati
on
•Application Server processes codes and formats data
Server
•Web Server sends response to browser
•Client Codes adds display to existing page
9

Processing a request

1. Request
q for Web server IP address
2. DNS Server sends IP address
3. Client performs request using IP address
4 Web server processes request
4.
5. Web server sends web page requested to client
10
When you enter a URL into your Web browser, your DNS server uses
its resources to resolve the name into the IP address for the appropriate Web
server

Remaining Slides
Remaining Slides
– HTML 
HTML – HyperText Markup Language
HyperText Markup Language
– CSS – Cascading Style Sheets
– JavaScript
JavaScript 
 HTML Components
HTML Components
• Documents
– Document = page = HTM file = topic
– Content (text, images)
( , g )
– Tags (display commands)
• Other terms
Other terms
– Window: browser display window
– URL: Uniform Resource Locator
– Hyperlink: hypertext jump to a resource
– Resource: URL, image, mailto, external file
g

Understanding URL
Understanding URL 
• Every Web page has a unique address called a 
URL (Uniform Resource Locator) which 
identifies where it is located on the Web. 
• E.g, the URL for CSM Library’s home page is: 
• http://www.smccdd.edu/accounts/csmlibrary
/index.htm

http://www.smccdd.edu/accounts/csmlibrary/index.htm

protocol Server name Resource ID

 HTML Pages
HTML Pages
• HTML pages are tag‐based documents
pages a e tag based docu e ts
– Really plain ASCII text files
– Don't look like documents they represent
– Tags indicate how processing program should display 
text and graphics
– Designed to describe hypertext, not paper
Designed to describe hypertext not paper
– Processed by browsers "on the fly"
– Tags usually appear in pairs
Tags usually appear in pairs
– Most have reasonable names or mnemonics
– Most can be modified by attributes/values

That's How This...
<HTML>
<HEAD>
<BODY background="slate.gif">
<H1>Welcome</H1>
<IMG SRC="DOUGLAS.GIF" WIDTH="80" HEIGHT="107"
ALT="Our
ALT Our Founder"
Founder BORDER
BORDER="0">
0 >
<H2>A Message from the President </H2>
<P><font color=red>Good evening! Thank you for
working late!</font></P>
<P>H ll and
<P>Hello d welcome
l t
to D
DougCo,
C I
Incorporated!
t d! I'
I'm
<b>Douglas S. Michaels,</b> President and Founder,
<a href="acronyms.htm">COB, CEO, COO, and
BBBWAIC</a>. Let me take this opportunity
pp y to
congratulate you on obtaining employment here at
DougCo; I want you to know that you've chosen to
spend your career in one of the most worthwhile and
rewarding endeavors possible --making
making me richer!</P>
. . .
 ...Turns Into This

Some HTML Tag Examples
56#466# ) '0 &6# )
<HTML> </HTML>
<HEAD> </HEAD>
/
<TITLE> </TITLE>
<BODY> </BODY>
<H1>,
H1 <H2>,
H2 ... </H1>,
/H1 </H2>,
/H2 ...
<IMG ...> </IMG> (optional)
<A ...> </A>
<P> </P> (optional)
<BR> (none; "empty" tag)
<OL> </OL>
/
<UL> </UL>
<LI> </LI> (optional)
 HTML Document Layout
HTML Document Layout
• Example of basic tag positioning
p gp g
<html>
<head>
<title>Title bar text</title>
</head>
<body>
< >L k I'
<p>Look, I'm a paragraph!</p>
h!</ >
</body>
</html>
• Always think containers!
– Tag pairs that enclose content

Some Common Text Tags

Some Common Text Tags
• Heading levels
– h1 –
h1 h6, numbers inverse to text size
h6 numbers inverse to text size
<h1>Heading One</h1>
<h2>Heading One</h2>
• Paragraph
– Probably the most common tag
<p>Yada yada yada...</p>
• Line break (an empty tag)
– Used when <p>'s white space not wanted
This line will break<br>right
g there
• Note white space or lack thereof in HTML source  
does not matter!
 Tables (1)
Tables 
• Powerful, flexible information delivery
, y
– Used to reflect or impart structure
• A table is a container
<t bl > ... </t
<table> </table>
bl >
• That contains other containers (rows)
<tr> ... </tr>
• That contain other containers (cells)
<td> ... </td> (data cells)
<th> ... </th> (heading cells)
• That contain data – or other containers
– Text, graphics, lists, even other tables!
g p

Tables (2)
Tables 
• Basic table markup
<table border="1">
<tr>
<td>Row 1, Cell 1</td>
<td>Row
d 1
1, Cellll 2 2</td>
/ d
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2,
, Cell 2</td> /
</tr>
</table> Row 1, Cell 1 Row 1, Cell 2
Row 2,
2 Cell 1 Row 2,
2 Cell 2
 CSS Concepts
CSS Concepts
• Styles are named sets of formatting
commands
– [18pt, Arial, left aligned] "Section head"
– [Bold, italic, blue] "Glossary
Glossary term
term"
– [Normal, 10pt, Verdana] "Body text"
– [Italic,
[Italic orange,
orange small caps] "Bob"
Bob
• Style sheets are control documents that
are referenced by content documents
– MS Word, other editors & desktop publishing
programs have done it for years
– DOT : DOC :: CSS : HTM

Why Use CSS?

Why Use CSS?
• HTML formatting is awkward and
imprecise
– Originally intended to deliver well organized
text (aimed at structure, not formatting)
– Over time, formatting elements were added
that solved some problems, but created many
more
• Cascading Style Sheets
– Separate format from content
– Enforce consistency
– Greatly simplify control & maintenance
 What'ss "Cascading"
What Cascading  All About?
All About?
• Three places to put style commands
– External: Affects all documents it it'ss attached to
– Internal: Affects only document it appears in
– Inline: Affects only text it
it'ss applied to
• Cascading means styles' "pecking order"
– Precedence is: Inline > Internal > External
– Picture a document whose style sheet specifies
Verdana as the font,, with one p paragraph
g p style
y in
Courier New, with one bold word or phrase

Coding CSS Rules

Coding CSS Rules
• Rules have very specific parts and syntax
– Rules have two basic parts: selector and declaration
– Declaration also has two parts: property and value
rule

h2 { font-style : italic ; }

property value

selector declaration
– Selector tells the rule what to modify
– Declaration tells the rule how to modify it
D l ti t ll th l h t dif it
 JavaScript Intro
JavaScript Intro
• What JavaScript isn’t
– Java (object‐oriented programming language)
– A "programmers‐only" language
• What JavaScript is
– Extension to HTML (support depends on browser)
– An accessible, object‐based scripting language
• What JavaScript is for
h f
– Interactivity with the user: 
* input (user provides data to application) 
input (user provides data to application)
* processing (application manipulates data)
* output (application provides results to user)

Implementing JavaScript (1)
• Direct insertion into page (immediate)
– In <script></script> container within document 
head or body
• Direct insertion into page (deferred)
– In <script></script> container and inside function 
{ … } definition within document head or body
• Through external references
– In external .js files (immediate/deferred)
– Much like CSS external reference
• Embedded inline
– Within other tags (as attribute values)
 A Few JS Examples (1)
• Some basic JavaScripts
– To get the day of the month
g y
var day = new Date().getDate();
– To do something ten times
for (var x=0; x<10; x++)
{
document.write( x * x );
}
– To make a decision and act on it
if (username == "Bob")
{ userisknown
i k = t
true;
displayWelcomeBack(username); }
else
{ userisknown
i k = f
false;
l
displayFirstLogin(username); }

JS Eg‐ Popup Boxes: confirm
JS Eg Popup Boxes: confirm
var r=confirm("Press a button!");
if (r==true)
{
alert("You
alert( You pressed OK!");
OK! );
}
else
{
alert("You pressed Cancel!");
}

30
 Summary
• Aim of today is to expose you to the main 
aspects of Web tech.
fW b h
• Most Web pages – remote or local – are a 
combination of the technologies outlined
g , ,
• Technologies like DHTML, XHTML, and XML 
are based on these
• As we proceed throughout the lectures, the 
As we proceed throughout the lectures, the
different topics will be elaborated
• Note: PHP and AJAX have not been 
Note: PHP and AJAX have not been
introduced today!

References
• CSE 1041 
CSE 1041 – Previous lecture notes
Previous lecture notes
• http://www.stcmidtenn.org
• h // lid h l
http://slides.html5rocks.com/#timeline‐slide
k / i li lid
• http://www.smccd.edu/accounts/csmlibrary/t
utorials/url.html
• http://www.howstuffworks.com/dns.htm
p // /