COMM 1213 H1 COMP 4923 X1

COMM 1213 H1COMP 4923 X1 Advanced HTML & Introduction to Computer Programming (Readings: Ch. 8, 9 Knuckles)

Outline • Moe’s 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

Moe’s World <HTML> <HEAD> <TITLE>Moe's Homepage</TITLE> </HEAD> <BODY LINK="#FFFFFF" VLINK="#FFFF99"> <P><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=10 WIDTH="100%" HEIGHT="100%"> <TR> <TD VALIGN=top WIDTH=100 BGCOLOR="#99CCCC"> <P><A HREF="http://www.acadiau.ca">Acadia University</A> <HR> <A HREF="http://cognovatech.com">CogNova Technologies</A> <HR> <A HREF="http://bob.com">Sideshow Bob's Basement</A> <HR> <A HREF="http://willie.com">Groundskeeper Willie's Workshop</A> <HR> </TD> <TD VALIGN=top BGCOLOR="#FFFFFF"> <P><TABLE BORDER=1 BGCOLOR="#99CCCC" CELLPADDING=2 HEIGHT=33> <TR> <TD WIDTH=33 BGCOLOR="#FFFFFF"> <P><IMG SRC="world.gif" WIDTH=33 HEIGHT=33 ALIGN=bottom> </TD> <TD> <H4>Welcome to Moe's World!</H4> </TD> </TR> </TABLE> <P> Feel free to click on one of my favorite links to the left or stick around and see what I have to say. <P>Blagh Blagh Blagh </TD> </TR> </TABLE> </BODY> </HTML>

Frames – Chapter 8 • Link to on-line website for Craig D. Knuckles text

Intro to HTML Forms – Ch.9

HTML Forms <HTML> <HEAD> <TITLE>Various Form Elements</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P><FORM name=demoform> <P><B>TEXT FIELD:</B><INPUT TYPE=text VALUE="Enter Your Name" SIZE=15><BR> <HR> <B>TEXT AREA: </B><TEXTAREA ROWS=4 COLS=30 WRAP=virtual>Enter Special Requests here!</TEXTAREA><BR> <HR> <B>CHECKBOXES:</B> Choose some of the following toppings for your pizza.<BR> Pepperoni:<INPUT TYPE=checkbox VALUE=somevalue> Sausage:<INPUT TYPE=checkbox VALUE=somevalue> Mushrooms:<INPUT TYPE=checkbox VALUE=somevalue> Onions:<INPUT TYPE=checkbox VALUE=somevalue> Extra Cheese:<INPUT TYPE=checkbox VALUE=somevalue><BR> <HR>

HTML Forms <B>RADIO BUTTONS:</B> Pick a size for your pizza.<BR> Small:<INPUT TYPE=radio NAME=radio 1629906> Medium:<INPUT TYPE=radio NAME=radio 1629906> Large:<INPUT TYPE=radio NAME=radio 1629906> X-Large<INPUT TYPE=radio NAME=radio 1629906><BR> <HR> <B>POP-UP-MENU :</B> Choose one of the following delivery options.<BR> <SELECT > <OPTION>Pickup <OPTION>Delivery <OPTION>Eat In </SELECT><BR> <HR> <B>GENERIC BUTTON : </B><INPUT TYPE=button NAME=notimportant VALUE="Click Here to Process Order."><BR> <HR> <B>RESET BUTTON: </B><INPUT TYPE=reset VALUE="Reset the form"> </FORM> </BODY> </HTML>

Client-Server Model

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 touchsensor=press,Then backup • Loops (For 4 times, Do …) • Functions ( FollowLine, CalcTotal(x) )

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 …?

HTML code C code Interpreter Compiler *.exe Operating System Computer Hardware Programming Languages • What is the difference between an interpreter and a compiler?

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

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

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

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

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

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/sunsets_lake.php

JavaScript • JavaScript – Runs within a browser, can manipulate most aspects of HTML webpage.html Browser JavaScript Interpreter Operating System Computer Hardware

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

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

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

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/

THE ENDdanny.silver@acadiau.ca

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

TCP/IP Protocol Architecture Transmission Control Protocol Internet Protocol

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

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

Major Architectural Components of the Web Client 1 Browser HTTP TCP/IP Server A HTTP Server App. Server Database Server Internet Client 2 Browser index.html URL Server B Server C

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. • Let’s down load one and try it … <BODY> <H1>My new baby girl.</H1> <IMG SRC=“NicoleSilver.jpg”> </BODY>

Hyper Links <HTML><HEAD></HEAD> <BODY> <H1>My Oldest Daughter.</H1> <IMG SRC=“Natalie.jpg”> Natalie goes to <A HREF=“http://www.ems.ednet.ns.ca”>Evangeline Middle School</A> Which is in New Minas. Click <A HREF=“mailto:nsilver@ems.nsed.ca”>Here</A> to send her email. </BODY> </HTML>

COMM 1213 H1 COMP 4923 X1