Internet Programming

1. Internet Programming COMP SCI 331 Internet Programming

2. Introductions • My name is … • How to find me • Course Policies • Background • Your turn Internet Programming

3. Mac 122 Policies • The room will be locked but students who take a class in that room will have card access during the following times as long as no class is in session: • 1. Monday through Friday. 7:00 AM - 9:30 PM. • 2. Saturday and Sunday 9:00 AM through 4:30 PM • There is no access during other hours. • The computers are to be used for course work only. • Students are NOT to use the instructor workstations nor the projection equipment. We CAN check who logged into them. • No software is to be installed on any of the machines. Installing software will result in your access being revoked. Be aware, that it is easy to find out who was logged into a machine when unauthorized software was installed. • No food or drink is allowed in the room at any time. • No one who does not have card access should be let into the room. Internet Programming

4. Internet Physical Layout Internet Programming

5. The First Version of the Internet Internet Programming

6. Internet History • ARPA = DoD Advanced Research Projects Agency funds ARPANet. FTP and e-mail only • First node: UCLA in 1969 • 1971: 26 computers form the ARPAnet • 1982: TCP/IP becomes the standard protocol. First proposed in 1974 • 1986: National Science Foundation (NSF) sponsors the NSFnet that replaces ARPANet • 1990: commercial companies are allowed to join Internet Programming

7. Internet Protocols Internet Programming

8. TCP/IP Protocol • IP Header Structure Internet Programming

9. TCP/IP Protocol • TCP Header Structure Internet Programming

10. Domain Name Server (DNS) Internet Programming

11. Some Domain Name Suffixes Internet Programming

12. Internet and Local Area Networks • LAN organization Internet Programming

13. Internet and Local Area Networks • Router provides TCP/IP connection to LAN Internet Programming

14. Multiple Accounts on a Server Internet Programming

15. Multiple Domains on a Server Internet Programming

16. Internet Next Generation • Current version of TCP/IP is IPv4 • More than 100 countries are on the Internet • Over 100 million nodes • Internet address space is running out • There are assigned but underused domains • IETF (Internet Engineering Task Force) has issued the new spec (August 10, 1998, Toronto) • IPv6 also known as IPng Internet Programming

17. IPv4 vs. IPv6 IPv6 will provide • Expanded Routing and Addressing Capabilities • increases the IP address size from 32 bits to 128 bits • A new type of address called a "anycast address“ • allows nodes to control the path which their traffic flows • New Header Format • Although IPng addresses are four times longer than the IPv4 addresses, the IPng header is only twice the size of the IPv4 header • some IPv4 fields are dropped or made optional Internet Programming

18. IPv6 Additional Capabilities • Improved Support for Options • more efficient forwarding • less stringent limits on the length of options • greater flexibility for introducing new options • Quality-of-Service Capabilities • enable the labeling of packets belonging to particular traffic "flows" • Authentication and Privacy Capabilities • extensions to provide support for authentication, data integrity and confidentiality Internet Programming

19. IP Addresses and Routing • Experiment: look at Internet Addresses Internet Programming

20. IP Addresses and Routing • Experiment: trace the route of a package Internet Programming

21. Web Design Guidelines Internet Programming

22. Web Design Guidelines Don’t make users think Don’t squander users’ patience Focus users’ attention Expose features Communicate effectively Use white space Use conventions Test early and often Internet Programming

23. Usability Commandments • You don’t use pop-ups. • You don’t change users’ window size. • You don’t use too small font sizes. • You be concise. • Long passages are harder to read. Internet Programming

24. Usability Commandments • You don’t have unclear link text. • Links have to be precise and lead to the destination they describe. Ambiguous or hidden links should be avoided. • You don’t have dead links. • You have at most one animation per page. • You make it easy to contact you. Internet Programming

25. HTML and XHTML Internet Programming

26. HTML • Hypertext Mark-up Language – formatting specification for hyperdocuments • Current version DOCTYPE header: • Based on tags • Block tags: <tag> …. </tag> • Inline tags: <tag/> • Comments: not rendered but carry information • <!-- …comment text here …--> <!DOCTYPE HTML PUBLIC =”-//w3c/DTD XHTML 1.0 Strict//EN http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd> Internet Programming

27. HTML Versions • Hypertext Mark-up Language – formatting specification for hyperdocuments • HTML has gone through several versions • The last one is HTML 4.0 but this HTML standards are being replaced by XHMTL standards • XHMTL is HTML that confirms with XML syntax rules • DHTML is a reference to HTML with interactive (dynamic) content • Most often created by JavaScript • There are other client-side scripting languages Internet Programming

28. The HTML Source Document • All web pages are entirely plain-text documents • Special formatting is imparted through the use of tags • HTML files should end in .htm and not contain any spaces in the file name • You can open a HTML file by dragging the file icon to an open browser window Internet Programming

29. Writing and Indenting HTML Code • Any text editor can be used to create an HMTL document – even Notepad • We will use MS Visual Web Developer • Provides useful syntax highlighting and help • MS Expression Web, NVU and many other Web editors exist • Use lower case letters for your tags • Indenting your code makes nesting tags easier Internet Programming

30. Block-level vs. Inline Elements • Block-level elements are designed to define a complete section of text • For example the header, <p>, and <body> tags are block elements • Inline elements affect a small text area • Can be as small as a single character • More often a word, phrase or sentence • The <em>, <strong>, and <b> tags are inline elements Internet Programming

31. HTML Document Skeleton <html> <head> The header: contains information about the document, not content </head> <body> The body: contains the contents of the document </body> </html> Internet Programming

32. XHTML • XHTML was introduced to supercede HTML and has stricter rules • Standardized version of HTML by the W3C • Based on XML • XML is not a formatting mark-up language • Its function is to define data formats and store data • XML has much stricter syntax rules than HTML • XHTML is HTML that complies with strict XML syntax rules Internet Programming

33. XHTML Document Skeleton <?xml version=1.0:?> <!DOCTYPE HTML PUBLIC =”-//w3c/DTD . . . > <html xmlns = “http://www.w3.org/1999/xhtml”> <head> The header: contains information about the document, not content </head> <body> The body: contains the contents of the document </body> </html> Internet Programming

34. XHTML Syntax Rules • Documents start with an XML declaration • The html tag has an XML namespace specification • Tags are case sensitive • Attribute values must always be quoted • Documents must have a root element • Elements must be properly nested Internet Programming

35. The XHTML Source Document • XHTML documents require an XML declaration at the head of the document • Identifies version of XML • A DOCTYPE directive provided a Document Type Definition (DTD) • Specifies the type of document as XHTML • The HTML tag includes and xmlns attribute • Defines the XML namespace • Needs to distinguish identically named tags Internet Programming

36. Nesting XML Tags • The following tags are properly nested: <root> <child> <subchild> ... </subchild> </child> </root> Internet Programming

37. Improper Nesting • The following nesting of tags is wrong: <root> <child> <subchild> ... </child> </subchild> </root> Internet Programming

38. The <meta> Element • Meta tags add information about a web page that is invisible to web browsers • The tags are read by search engines and indexers • Meta tags are often used to identify keywords and descriptions Internet Programming

39. Paragraphs: the <p> Element • Browsers ignore consecutive whitespace characters • The <p> element is used to define a new paragraph • Good HTML design requires that you use the closing </p> tag, however no browser requires it • Browsers ignore any tag that is not understood • if a tag is not performing the function you want, check for misspelling Internet Programming

40. Line Breaks: the <br /> Element • The <br /> tag causes an immediate line break on the page • The <br /> has no closing tag, so the XHTML tag has a trailing forward slash • It is also correct to write a <br> </br> pair Internet Programming

41. Headers • Headers are content tags that specify a font size • They should be used only for titles and section headers • <h1> is the largest, <h6> the smallest • Proper use of header tags allows a table of contents to be retrieved by just displaying the headers Internet Programming

42. HTML Container Tags

43. HTML Container Tags

44. HTML Inline Tags Special Characters

45. Tag Attributes <hr> <font> … </font> - DEPRECATED!

46. Tag Attributes <body> … </body> <p> … </p>

47. Anchors and Links <a> … </a>

48. Site Organization No planned structure Internet Programming

49. Site Organization Linear linking structure Internet Programming

50. Site Organization Hierarchical structure Internet Programming