Internet, Web, and HTML

1. Internet, Web, and HTML Compiled by Dr. Billy B. L. Lim

2. Why a course in Web Development Technologies? • Rationale • Students need it for their projects, want it for their resumes, etc. • “What do Electricity, Telephone, Radio, Television, and the Web have in common?”

3. The Web vs. The Others Source: Wired Magazine, April, 1996

4. A Brief History of the Internet • Started in 1960 by the Department of Defense (DoD) • DoD funded Advanced Research Projects Administration Network (ARPANet). • Made available for nonmilitary uses in 1984 • Provides a platform for many “services” Computer Hardware Computer Hardware Browsers File transfer protocol FTP Web Servers Simple Mail transfer protocol SMTP Cables & Data/Phone Lines, Directories etc Mail Clients Hypertext transfer protocol HTTP Directory Manager Modems etc Internet Service Provider Hypertext Markup Language HTML “News” Clients TCP/IP etc..etc.. And so on Games And so on

5. The Internet Is a Network of Networks

6. History of the World Wide Web • The World Wide Web is an application suite that enables information sharing across a wide range of technologies • Developed in 1989: • Supports information-sharing across teams with diverse technologies • Documents produced in HTML: • Documents designed for human consumption

7. History of the Web (cont’d) • Nov 1992: NCSA releases Mosaic • 1994: Netscape • 1995 Netscape capitalization over $1B! • Growth • Jan 1993 - 130 Web Sites • Jun 1993 - 10,000 Web Sites • Today? (5,000 new sites per week?)

8. Why the Web? • Ease of publishing on the Web is a landmark event • As important as... • the introduction of the IBM PC in 1981 • Printing Press: High volume, low cost printed-word for all! • Personal Computer: High volume, low cost computing for all!

9. Impact of Web Publishing • Anytime, Anywhere Access • All the world’s information stored on the Internet • Your company’s internal information • Intranet and extranet publishing • New web sites build upon existing sites • Leverage what’s already there via hyperlinks! • ANYONE can publish ANYTHING!

10. Other Impacts ??? • Ethical vs. Social vs. Global impacts • Need your participation here!!!

11. Index to the rest of this presentation • Client/Server Architecture • HTTP • Browsers and Web Servers • HTTP Client/Server Architecture • Structure of a Web Site • Web Applications • HTML/XML/XHTML • CSS • Web 1.0, 1.5, 2.0 • RIA

12. Client-Server Architecture • Deployment diagram of a generic, client-server Internet architecture:

13. Hypertext Transfer Protocol • The Hypertext Transfer Protocol (HTTP) supports serving up documents in the Hypertext Markup Language (HTML): • HTML documents include links to other Web documents. • Web documents may also include forms to pass data from the user to the Web server. • HTTP can serve any type of document. • The MIME specification defines a canonical naming convention for documents of various media.

14. Web Browsers and Web Servers • Two key types of programs: • Web browsers • Web servers • Development of browsers and servers:

15. HTTP Client-Server Architecture • Deployment diagram of a Web server: • Uses HTTP and URL (Uniform Resource Locator) to locate, download, interpret, and display “pages”

16. The Structure of a Web Site • A Web site is a hierarchy of HTML documents, media files, and the directories that form the structure: • Example of an HTTP URL: • http://www.soccer.org/league/Spring2001.html

17. Web Applications • A Web site is a collection of static HTML pages. • A Web application is a Web site with dynamic functionality on the server (or sometimes on the client using applets or other interactive elements). • Web applications use HTML forms as the user interface to code that is running on the server: • Data is passed from the HTML form to the server using the Common Gateway Interface (CGI). • The CGI data is sent in the HTTP request stream.

18. The Structure of HTML • HTML documents have a formal structure: • You can validate documents • <!doctype> identifies the version or “dialect” of HTML to which the document conforms <!doctype html public “-//w3//dtd html 4.0//en”> <html> <head> <title>Document Title</title> </head> <body> Marked up text goes in here </body> </html>

19. HTML Markup Tag name Attribute name Attribute value <h2 align="center">Heading Level 2 - Centered</h2> Attribute End tag Content Start tag HTML Element

20. Misc Tags - 1 <HTML> <HEAD> <TITLE> HTML Basics</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#F0FC0F" VLINK=“#FF0000”> <CENTER><IMG SRC = "duke_swinging.gif" ></CENTER> <H2 align= "center"> Welcome!</H2> <P><B>I cause a blank line after me and my letters are bold.</B></P> Now I will break in the line without a blank line after me<BR> <I> I look like forward movement. Italics </I>

21. <OL> <LI>Numbered or <LI>Ordered <LI>List </OL> <UL><LI> Unnumbered List: <UL><LI>Vermont <LI>New Hampshire</UL> <LI> Nested Bullets: <UL><LI>Michigan <LI>Indiana</UL> </UL> <PRE>My text stays as it is typed. I don’t interpret program code. #!/bin/csh cd $SCR I can't display HTML code</PRE> <XMP> I display HTML code on a HomePage<HTML><HEAD> <TITLE> </XMP> <a href="http://cnn.com">Click here for news ...</a> Misc Tags - 2

22. HTML: Presenting Data • Letting the designer decide how information should be displayed: • HTML can make pages look a particular way • E.g., <TABLE BORDER=1> <TR><TH>Product ID</TH><TH>Description</TH><TH>Price</TH></TR> <TR><TD>12345</TD><TD>Office 2000</TD><TD>$599.99</TD></TR> </TABLE>

23. XML: Structuring Data • Letting the designer decide how data should be structured • E.g., <Product> <Product_ID>12345</Product_ID> <Description>Office 2000</Description> <Price>599.99</Price> </ Product> Can get the presentation (e.g., table below in HTML) via XSLT

24. XHTML • Wikipedia: • “The Extensible HyperText Markup Language, or XHTML, is a markup language that has the same expressive possibilities as HTML, but a stricter syntax. Whereas HTML is an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed (syntactically correct), XHTML documents allow for automated processing to be performed using a standard XML library—unlike HTML, which requires a relatively complex, lenient, and generally custom parser (though an SGML parser library could possibly be used). XHTML can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000.”

25. HTML 5 • HTML5 Showcase (Apple's Safari browser only)

26. CSS • Wikipedia: • “In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C).

27. CSS (2) • Wikipedia: • CSS information can be provided by various sources: • Author styles (style information provided by the web page author), in the form of • external stylesheets, i.e. a separate CSS-file referenced from the document • embedded style, blocks of CSS information inside the HTML document itself • inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute. • User style • a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents. • …

28. CSS: Syntax • Wikipedia: • A style sheet consists of a list of rules. Each rule consists of one or more comma-separated selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (:) then a value. • Example: • p { text-align: center; color: black; font-family: arial } • h2 { font-size: 110%; color: red; background: white; }

29. How to Insert a Style Sheet • External Style Sheet • <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • Internal Style Sheet • <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> • Inline Styles • <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

30. RIA • Wikipedia: • Rich Internet applications (RIA) are web applications that have the features and functionality of traditional desktop applications. RIAs typically transfer the processing necessary for the user interface to the web client but keep the bulk of the data (i.e maintaining the state of the program, the data etc) back on the application server. • RIAs typically: • run in a web browser, or do not require software installation • run locally in a secure environment called a sandbox • can be "occasionally connected" wandering in and out of hot-spots or from office to office.

31. AJAX • Asynchronous JavaScript and XML (AJAX) • Enables creation of interactive Web application • HTML and CSS to present information • Document Object Model (DOM), manipulated through JavaScript, to dynamically display and interact with the information presented • XMLHttpRequest object to exchange data asynchronously with the web server • No need to refresh the whole page • JSF components can include built-in AJAX functionality Source: Shin’s Web 2.0 and Java

32. Web 2.0 Phenomenon • Web as a Platform • User's computing activities occur on the web • Email, chatting, photo sharing, etc. • More and more apps are moving to the web • Collective intelligence • Folksonomy: Collaborative categorization • Data is key and should be shared • Mashups: Seamlessly combines content from more than one source into an integrated experience • Rich user experience • AJAX Source: Shin’s Web 2.0 and Java

33. Web 1.0 Personal Websites Email/News Groups Pop-ups Web Directories Web Classifieds TerraServer MP3 Web 1.5 Wikis Discussion Forums Pop-unders Yahoo Craigslist MapQuest Napster Web 1.0, 1.5, 2.0 Web 2.0 • Blogging (Roller) • RSS • Google Ad • del.icio.us • HousingMaps.com • Google Maps • iTunes Source: Shin’s Web 2.0 and Java