COMM 1213 H1 COMP 4923 X1

1
COMM 1213 H1COMP 4923 X1

• Advanced HTML
• Introduction to Computer Programming
• (Readings Ch. 8, 9 Knuckles)

2
Outline

• Moes World Example of a simple table based
  webpage
• HTML Frames (Chapter 8)
• Intro to (Chapter 9)
• HTML Forms
• Client Sever Model
• Programming Concepts
• JavaScript

EG
3
Moes World

• ltHTMLgt
• ltHEADgt
• ltTITLEgtMoe's Homepagelt/TITLEgt
• lt/HEADgt
• ltBODY LINK"FFFFFF" VLINK"FFFF99"gt
• ltPgtltTABLE BORDER0 CELLSPACING0 CELLPADDING10
  WIDTH"100" HEIGHT"100"gt
• ltTRgt
• ltTD VALIGNtop WIDTH100 BGCOLOR"99CCCC"gt
• ltPgtltA HREF"http//www.acadiau.ca"gtAcadia
  Universitylt/Agt
• ltHRgt
• ltA HREF"http//cognovatech.com"gtCogNova
  Technologieslt/Agt
• ltHRgt
• ltA HREF"http//bob.com"gtSideshow Bob's
  Basementlt/Agt
• ltHRgt
• ltA HREF"http//willie.com"gtGroundskeeper
  Willie's Workshoplt/Agt
• ltHRgt
• lt/TDgt
• ltTD VALIGNtop BGCOLOR"FFFFFF"gt
• ltPgtltTABLE BORDER1 BGCOLOR"99CCCC"
  CELLPADDING2 HEIGHT33gt

4
Frames Chapter 8

• Link to on-line website for Craig D. Knuckles
  text

5
Intro to HTML Forms Ch.9
6
HTML Forms

• ltHTMLgt
• ltHEADgt
• ltTITLEgtVarious Form Elementslt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLOR"FFFFFF"gt
• ltPgtltFORM namedemoformgt
• ltPgtltBgtTEXT FIELDlt/BgtltINPUT TYPEtext
  VALUE"Enter Your Name" SIZE15gtltBRgt
• ltHRgt
• ltBgtTEXT AREA lt/BgtltTEXTAREA ROWS4 COLS30
  WRAPvirtualgtEnter Special Requests
  here!lt/TEXTAREAgtltBRgt
• ltHRgt
• ltBgtCHECKBOXESlt/Bgt Choose some of the
  following toppings for your
• pizza.ltBRgt
• PepperoniltINPUT TYPEcheckbox
  VALUEsomevaluegt
• SausageltINPUT TYPEcheckbox
  VALUEsomevaluegt
• MushroomsltINPUT TYPEcheckbox
  VALUEsomevaluegt

7
HTML Forms

• ltBgtRADIO BUTTONSlt/Bgt Pick a size for your
  pizza.ltBRgt
• SmallltINPUT TYPEradio NAMEradio 1629906gt
• MediumltINPUT TYPEradio NAMEradio 1629906gt
• LargeltINPUT TYPEradio NAMEradio 1629906gt
• X-LargeltINPUT TYPEradio NAMEradio
  1629906gtltBRgt
• ltHRgt
• ltBgtPOP-UP-MENU lt/Bgt Choose one of the
  following delivery
• options.ltBRgt
• ltSELECT gt
• ltOPTIONgtPickup
• ltOPTIONgtDelivery
• ltOPTIONgtEat In
• lt/SELECTgtltBRgt
• ltHRgt

8
Client-Server Model
9
Client-Server Model
10
Programming Fundamentals

• We will use a LEGO robot to demonstrate the
  basic building blocks of all programs
• I/O actions (move, display, input)
• Variables (counter 1, x 25)
• Conditional logic
• (If touchsensorpress,Then backup
• Loops (For 4 times, Do )
• Functions ( FollowLine, CalcTotal(x) )

11
Programming Langauges

• Allow humans to write logical sequences of
  computer commands in an English like language
• Programs can be
• Interpreted by another program to execute the
  commands
• Compiled into machine code and then run on its
  own to excute the commands
• Java has become one of the dominate programming
  langauges
• Other languages ?

12
Programming Languages

• What is the difference between an interpreter and
  a compiler?

13
The Java Programming Language

• Java is a relatively new language
• Green, 1991 Sun Microsystems dev. for use in
  consumer devices such as intelligent TV
  controllers
• Object Oriented but simpler than C
• Architecture neutral (can run on lots of h/w)
• Network ready
• Portable, Reliable and Secure

14
Java Programs and the Java Virtual Machine
Internet
program.java
program.class
Java Virtual Machine
Compiler
Operating System
Computer Hardware
15
Java and the Web

• In 1995 the first HotJava browser was demoed at
  SunWorld exhibition
• It could download programs called applets from a
  the web and run them locally
• Provided animation and interaction
• Write once, run anywhere
• By 1996 both Netscape and MS supported Java
  within their browsers

16
Java and the Web

• Java has been designed for the Web
• It has two attributes that make it suitable
• Security An assortment of security features that
  guarantee that no evil applets can be written and
  assist in the writing of good code
• Portability Applications and Applets can run on
  Windows, Unix, Linux, Mac

17
Java Applets

• Applets Run within a browser in an allocated
  space of webpage

program.class
program.java
Browser
Java Virtual Machine
Compiler
Operating System
Computer Hardware
18
Java Applets over the Web
Java source code
abc.java
Internet
Java compiler
HTTP Server App Server
abc.class
Java applet bytecode
Web Browser
Java (JVM) Interpreter
Server
Client
19
Java Applets

• Full-feature client-side programming language
• Code is external to HTML, but can be called by
  HTML
• HTML allocates space, applet executes in that
  space
• For complex algorithms and local data and image
  manipulation
• Examples
• HelloApplet.html, HelloApplet.java
• AnimationApplet.html, AnimationApplet.java
• http//www.paradise-inn-carriacou.com/sunsets/suns
  ets_lake.php

20
JavaScript

• JavaScript Runs within a browser, can
  manipulate most aspects of HTML

webpage.html
Browser
JavaScript Interpreter
Operating System
Computer Hardware
21
JavaScript

• Originally LiveScape, developed independent of
  Java at NetScape by Brendan Eich
• A small scripting language designed to enhance
  webpages by manipulating webpage objects
• Code is embedded in HTML, and called by HTML
• Can manipulated most aspects of a webpage
• For generation of dynamic content but less
  complex computation and data manipulation

22
JavaScript

• Examples
• Movement of browser windows
• Validation of entered FORM data
• Event handling

23
Why learn JavaScript?

• A good first step to learning programming
• All fundamental concepts are used
• Object-Oriented Programming (OOP)
• Allows you to quickly build dynamic content for
  webpages
• JavaScript code can be saved and reused
• Use existing libraries of JavaScript code

24
Resources

• Getting started with HTML from the W3C
• W3C's Recommendation for HTML 4.0 is the
  authoritative specification for HTML
• W3 Schools HTML Tutorial
• HTML Goodies HTML Primer
• An HTML Code Tutorial
• Writing HTML a tutorial for creating web pages (a
  little old but a different perspective)
• JavaScript examples
• http//www.w3schools.com/js/js_examples.asp
• http//www.js-examples.com/page/javascripts.html
• http//javascript.internet.com/

25
THE ENDdanny.silver_at_acadiau.ca
26
Architectural of the Internet
Client 1
Acadia
Server X
Application
TCP/IP
Server Y
Intranet
Internet
Client 2
Application
Server C
Server B
Server C
27
TCP/IP Protocol Architecture
Transmission Control Protocol
Internet Protocol
28
TCP/IP Protocol Architecture

• Internet Protocol (IP) like a postcard that
  contains
• Destination address (131.162.201.7)
• Return address
• Block of data (content)
• Transmission Control Protocol (TCP)
• Ensures the post card gets through
• Ensures the order of deliver
• Handles errors and control flow

29
Client-Server Applications that use the Internet
Telnet Protocol
Telnet Window
Telnet Server
FTP
FTP Server
FTP Client
SMTP/POP
eMail Client
eMail Server
TCP
TCP
IP
IP
Internet
Network
Network
Physical
Physical
30
Major Architectural Components of the Web
Client 1
Browser
HTTP TCP/IP
Server A
Database Server
HTTP Server
App. Server
Internet
Client 2
Browser
index.html
URL
Server B
Server C
31
Images

• Various digital image formats can be embedded
  with in HTML .gif, .jpg
• Example
• See www.bellsnwhistles.com as source of images
  and other objects.
• Lets down load one and try it

ltBODYgt ltH1gtMy new baby girl.lt/H1gt ltIMG
SRCNicoleSilver.jpggt lt/BODYgt
32
Hyper Links

• ltHTMLgtltHEADgtlt/HEADgt
• ltBODYgt
• ltH1gtMy Oldest Daughter.lt/H1gt
• ltIMG SRCNatalie.jpggt
• Natalie goes to
• ltA HREFhttp//www.ems.ednet.ns.cagtEvangeline
  Middle Schoollt/Agt
• Which is in New Minas.
• Click ltA HREFmailtonsilver_at_ems.nsed.cagtHerelt/A
  gt to send her email.
• lt/BODYgt
• lt/HTMLgt