1 Our New Home ng/WebProgramming.htm Any comments or suggestions, please send them to me or TAs!

2 Programming the World Wide Web 1.WWW & HTML 2.Web Programming Languages –JavaScript, Java, Perl, PHP 3.Cascading Style Sheet (CSS)

3 1. A Brief Intro to the Internet - Origins - ARPAnet - late 1960s and early 1970s - Network reliability - For ARPA-funded research organizations - BITnet, CSnet - late 1970s & early 1980s - and file transfer for other institutions - NSFnet Originally for non-DOD funded places - Initially connected five supercomputer centers - By 1990, it had replaced ARPAnet for non- military uses - Soon became the network for all (by 1990) - NSFnet eventually became known as the Internet - What the Internet is: - A huge connection of computers connected in a communications network - At the lowest level, since 1982, all connections use Transmission Control Protocol/Internet Protocol ( TCP/IP) - TCP/IP hides the differences among devices connected to the Internet - A network of networks?

4 1. A Brief Intro to the Internet (continued) - Internet Protocol (IP) Addresses - Every node has a unique numeric address xxx.xxx.xxx.xxx - Form: 32-bit binary number - New standard, IPv6, has 128 bits (1998) ftp://ftp.isi.edu/in-notes/rfc2460.txt - Organizations are assigned groups of IPs for their computers - Domain names - Form: host-name.domain-names - First domain is the smallest; last is the largest - Last domain specifies the type of organization - Fully qualified domain name - the host name and all of the domain names - DNS servers - convert fully qualified domainDNS servers names to IPs - Problem: By the mid-1980s, several different protocols had been invented and were being used on the Internet, all with different user interfaces (Telnet, FTP, Usenet, mailto

5 1.1 The World-Wide Web (Wait?) - A new protocol used on the Internet - Origins - Tim Berners-Lee at CERN (Conseil European pour la Recherce Nucleaire) proposed the Web in Purpose: allows scientists to communicate with each other through documents - The unit of info. referred as Pages? Documents? Resources? - We’ll call them documents - Document form: hypertext? - Hypermedia – more than just text – images, sound, etc. - Web or Internet? - The Web: a collection of software and protocols ( http, telnet, ftp, mailto, etc.) - Runs on the Internet– a collection of computers, devices, networks.

6 1.2 Web Browsers - Mosaic – National Center of Supercomputing Applications (NCSA, Univ. of Illinois), in early First to use a GUI, led to explosion of Web use - Initially for X-Windows, under UNIX, but was ported to other platforms by late Browsers are clients - always initiate, servers react (although sometimes servers require responses) - Most requests are for existing documents, using HyperText Transfer Protocol (HTTP) - But some requests are for program execution, with the output being returned as a document 1.3 Web Servers - Running to response to browser requests, either existing documents or dynamically built documents - Request-driven

7 1.4 URLs (Uniform Resource Locators) - General form: scheme:object-address - The scheme is often a communications protocol, such as http, telnet or ftp - For the http protocol, the object-address is: //fully qualified domain name / doc path - For the file protocol, only the doc path is needed - Host name may include a port number, as in zeppo:80 ( 80 is the default, so this is silly) - URLs cannot include spaces(? Anything unusual about our web URL? ) or any of a collection of other special characters (semicolons, colons,...) - The doc path may be abbreviated as a partial path - The rest is furnished by the server configuration - If the doc path ends with a slash, it means it is a directory

8 1.5 Multipurpose Internet Mail Extensions (MIME) - Originally developed for sending different kinds of doc. Through Internet mail - identification of a doc. returned by the server (attached by the server to the beginning of the document) - Type specifications - Form: type/subtype - Examples: text/plain, text/html, image/gif, image/jpeg, video/mpeg - Server gets type from the requested file name’s suffix (.html implies text/html ) - Browser: gets the type explicitly from the server, otherwise, a conversion table - Experimental types - Subtype begins with x- e.g., video/x-msvideo - Experimental types require the server to send a helper application or plug-in so the browser can deal with the files

9 1.6 The Web Programmer’s Toolbox - HTML - To describe the general form and layout of documents - An HTML document is a mix of content and controls - Controls are tags and their attributes - Tags often delimit content and specify something about how the content should be arranged in the document - Attributes provide additional information about the content of a tag - Tools for creating HTML documents - HTML editors - make document creation easier - Shortcuts to typing tag names, spell-checker, - What You See Is What You Get (WYSIWYG) HTML editors, Macromedia, Adobe, Frontpage, … etc.

The Web Programmer’s Toolbox (continued) - eXtensible Markup Language (XML) - A meta-markup language - Used to create a new markup language for a particular purpose or area - Meaningful tags can be defined for a specific area, - No presentation details, only element definition - A simple and universal way of representing data of any textual kind - JavaScript - A client-side HTML-embedded scripting language – used to create dynamic HTML doc. - Only related to Java through syntax - Dynamically typed and not object-oriented – interpreted by clients’ browsers - Provides a way to access elements of HTML documents and dynamically change them Ex 1Ex 2

The Web Programmer’s Toolbox (continued) - Java - General purpose object-oriented programming language - Based on C++, but simpler and safer - Applets: a special kind of Java program especially for web programming - bytecodes  browsers  executes by Java Virtual Machine (JVM) -Perl (Practical Extraction and Report Language) - A general purpose language - Provides server-side computation for HTML documents, through Common Gateway Interface (CGI) - Perl is good for CGI programming because: - Direct access to operating systems functions - Powerful character string pattern-matching operations - Access to database systems Java-Ex1

The Web Programmer’s Toolbox (continued) - Perl is highly platform independent, and has been ported to all common platforms - Perl is not just for CGI - Syntax is similar to C, but, not compile to binary codes, instead, through interpreting. - PHP - A server-side scripting language - An alternative to CGI - Similar to JavaScript, syntax and dynamic typed - Great for form processing and database access through the Web Perl-CGI Perl- Concole Interne t CGICGI APPAPP PHP-Ex1

Origins and Evolution of HTML - Derived from SGML - Original intent: General layout of documents that could be displayed by a wide variety of computers - Recent versions: - HTML Introduced many new features and deprecated many older features - HTML A cleanup of XHTML Just 4.01 modified to fit the XML syntax - We’ll stick to nearly all of this syntax Basic Syntax - Elements are defined by tags (markers) - Tag format: - Opening tag: - Closing tag:

14 Basic Syntax (continued) - The content of a tag appears between its opening tag and its closing tag - Not all tags have content - If a tag has no content, its form is - If a tag has attributes, they appear between its name and the right bracket (later) - Tag names and attribute names must be written in lowercase letters - Every tag that has content must have a closing tag - Tags must be properly nested …….. - Comment form: - Browsers ignore comments, unrecognizable tags, line breaks, multiple spaces, and tabs - Tags are suggestions to the browser, even if they are recognized by the browser

Standard HTML Document Structure -,,, (or ) are required - All four can have attributes, but we’ll ignore them for now - The whole document must have as its root - A document consists of a head and a body or frameset - The tag is used to give the document a title, which is normally displayed in the browser’s window title bar (at the top of the display) - An SGML DOCTYPE command is required by XHTML 1.0, but there is not enough room on these slides to show it - see book for its exact form <!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Strict//EN” “ /xhtml1-strict.dtd” > - There are three DTDs, or standards Strict, Frameset, and Transitional

16 For the full Specifications of HTML4.01 and XHTML1.0 visit:

17 2 Cascading Style Sheet

18 That’s it for today! Next week: Ch.5 XML basics

19 Bonus #1 Write 2 CSS rules that : –Gives all h1 and h2 elements a padding of.5 ems, a grooved border style and a margin of.5 ems –Changes the color of all elements with attribute class = “green-Move” to green and shifts then down 25 pixels and right 15 pixels. –Refer to P. 99

20 Bonus.html Solution: 19.8 H1, H2 { padding:.5em; border-style: groove; margin:.5em }.greenMove { color: #00FF00; position: relative; top: 25px; left: 15px } This is an H1 header This is an H2 header Normal text Text with class greenMove bonus.html

21 <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" " <!-- roots.html Compute the real roots of a given quadratic equation (a*x*x + b*x + c). If the roots are imaginary, this script displays NaN, because that is what results from taking the square root of a negative number --> Real roots of a quadratic equation <!-- // Get the coefficients of the equation from the user var a = prompt("What is the value of 'a'? \n", ""); var b = prompt("What is the value of 'b'? \n", ""); var c = prompt("What is the value of 'c'? \n", ""); // Compute the square root and denominator of the result var root_part = Math.sqrt(b * b * a * c); var denom = 2.0 * a; // Compute and display the two roots var root1 = (-b + root_part) / denom; var root2 = (-b - root_part) / denom; document.write("The first root is: ", root1, " "); document.write("The second root is: ", root2, " "); // --> Html

22 HTML Document DHTML --> moving text around Jump into JavaScript world!

23 textMoving.js var dom, x, y, finalx = 300, finaly = 300; function initText(){ dom = document.getElementById('theText').style; //get the current position of the text var x=dom.left; var y=dom.top; //convert the string values of left and top to //numbers by stripping off the units x = x.match(/\d+/); y = y.match(/\d+/); //call the function that moves it moveText(x, y); }//end of initText //a function to move the text from its original position to (finalx, finaly) function moveText(x, y){ //if x coordinate is not equal, mover x toward finalx if (x !=finalx){ if(x > finalx) x--; else if (x<finalx) x++; } //if y coordinate is not equal, mover y toward finaly if (y !=finaly){ if(y > finaly) y--; else if(y<finaly) y++; } …….. HTML

24 Domain Name Conversion Domain Name Domain Name Server IP Web Server Internet

25 Simple Java Applet import java.awt.*; import java.applet.Applet; public class Drawing extends Applet //load applet class { public void paint (Graphics g) { g.setColor(Color.blue); g.fillOval(30,30,50,50); g.setColor(Color.orange); g.fillOval(60,40,90,90); } Note: Applet can’t be run by “java console”?

26 Applet applied in the HTML <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <-- wel2.html A document to test the Wel2 applet --> Wel2 <APPLET code = “Drawing.class" width = "500" height = “300"> Show Don’t for get to “javac” your java file first

27 A Perl Example Welcome to Wei's Consumer Electronics Purchasing Survey Center Your Age Category Your Gender Category <input type = "radio" name = "gender" value = "male" checked ="true" >Male Female Your Next Consuming Electronics Purchase will be: HDTV VCR CD Player Mini CD Player/Recorder DVD Player Others To see the results of the survey so far, click here Server-side Perl

28 # test the environment of perl running on = values %ENV; print "All of the environmental settings are: \n"; foreach $item print "$item \n"; } A Perl Example to query the Environment Settings Console

29 PHP embed in HTML PHP - practice 1: print date <?php print " Welcome to Wel's homepage "; print "Today is: "; print date("l, F js"); print " "; ?> PHP