1. The Internet & Web

2. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page

3. Useful web sites Color http://www.colorjack.com/ http://kuler.adobe.com/#create/fromacolor Type: http://www.typetester.org/

4. Terms: Intranet & Extranets Networks -- two or more computers connected together for communication and the exchange of resources. Intranet: Private network within organization or business to share information.

5. Terms: Networks LAN -- Local Area Network Typically a network in a single building or group of buildings MAN -- Metropolitan Area Network Local geographical area WAN -- Wide Area Network Public or commercial communications network – wide geographic areas.

6. The Internet Internet Inter-connected network of computer networks Originally limited to: government, research, and academic use (scientific papers unlike web today) NSFnet National Science Foundation

7. Growth of Internet in the 1990s 1. Removal of ban on commercial activity 2. Creation of Web by Tim Berners-Lee at CERNCERN invented internet-based hypermedia initiative for global information sharing. wrote one of the first web client and server in 1990 (www.w3.org/People/Berners-Lee/) 3. Creation of Mosaic, web browser at NCSA

8. Client/Server Interaction/communication between two computer programs. Client requests a service (file or data) from the server. Server Fulfills request and transmits requested item(s) to client.

9. Client/Server Client Web Page Server

10. Internet Protocols Protocols Rules for clients and servers to communicate with each other. There are number of protocols with specific functions.

11. Protocols File Transfer Protocol - FTP: Rules that allow files to be exchanged. Hypertext Transfer Protocol - HTTP: Rules for exchanging files (text, graphic images, sound, video) on the Web.

12. Internet Protocol - IP Address  All devices connected to the Internet have an numeric IP address.  Must identify different computers/nodes – like each house has a mailing address.  Addresses consist of a set of four groups of numbers (octets). 165.191.174.61 between 0 and 255.  CNN - 157.166.255.18

13. How can I Find My IP Address Windows Command Prompt >ipconfig >getmac (Mac Address) Vista: Control panel>>Network & Sharing>>View Status Local Area Connection>Details. Win 7: Control panel>>Network & Internet>> Network & Sharing Center>> Local Area Connection>>Details.

14. DNS  Domain Name System (domain name) - helps make reading IP address easier. 157.166.255.18 or CNN.com  Two or more parts, e.g. duq.edu, jma.duq.edu  The rightmost label conveys the top-level domain, e.g. edu

15. Top-Level Domain Name A top-level domain (TLD)- the suffix of domain name. Current generic TLDs:.edu,.com,.org,.net,.mil,.gov

16. County Code Two character codes to indicate the geographical location (country) of the web site. Examples:.tv (Tuvalu),.ws (Samoa),.au,.jp,.uk

17. Computer/Server name Parent folder name Your User folder name Pub folder name Class folder name Uniform Resource Locator Name of Web page – file name URL Address of a resource on the Internet.

18. Uniform Resource Locator URL Specifies: location of the document protocol used to retrieve document http://www.duq.edu/home.html

19. Web Standards (W3C Consortium) W3C – World Wide Web ConsortiumWorld Wide Web Consortium Offer recommendations related to the Web Produces specifications/Recommendations that help standardize web technologies

20. Accessibility Web Accessibility Initiative Recommendations for developers of user agents to facilitate use of the web by those with special needs. WCAG Web Content Accessibility Guidelines http://www.w3.org/WAI/WCAG20/quickref/ http://www.w3.org/WAI/WCAG20/quickref/

21. Accessibility Section 508 of the Rehabilitation Act Section 508 In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities (www.section508.gov).

22. HTML: Background Web development

23. What is Html/Xhtml? HTML 5 is still a draft HTML (4.01) is subsumed as XHTML 1.0 The Extensible HyperText Markup Language (XHTML) extends HTML - reformulated in XML

24. What is Html/Xhtml? XHTML was a cleaner and clearer standard compared to early versions of HTML. HTML 5 offers new elements for better semantics, structure, drawing, media content, and handling of forms. NavArticleSectionAsideFooter

25. HTML versions XHTML HTML 5 Cleaner and clearer standards What is Html/Xhtml?

26. HTML 5 Emphasizes semantics. Removes some presentational elements. Introduces new elements such as header, footer, article, sections, nav. Use elements that best describe your content. Styling is done with CSS

27. What is Html/Xhtml? Not case-sensitive Works without ending tag Overlapping tags All lowercase Tags in pairs Tag do not overlap HTML 4.01XHTML 1.0 & HTML 5

28. HTML/XHTML HTML: | XHTML: HTML: XHTML & HTML5: HTML: | XHTML:

29. HTML Elements HTML markup divides a document into elements (i.e., paragraphs). This is paragraph one…. Element Element Content

30. HTML Each individual markup code is referred to as an element or tag. Each type of element has a name. Each element is introduced by a start tag and terminated by an end tag

31. HTML Element's start tag is name enclosed in angle brackets:,,, … XHTML names = lower-case letters and numbers Element's end tag name preceded by a slash, enclosed in angle brackets:,,,…

32. HTML: Tags Hypertext MarkUp Language - HTML Beginning Tag Ending Tag Tags generally come in pairs.

33. HTML Elements Interface design Interface patterns Beginning Tag Ending Tag

34. HTML Tags Empty elements have start and end tags run together:,,… Empty elements such as: Horizontal rule Line break Image

35. Special characters <html> </html> = & = & ¡ = ! © = ©

36. HTML: Attributes Attributes or properties have Values color = “blue” width = “12”

37. HTML: Attributes Tags

38. HTML: Attributes Attributes Attribute or Properties Value of attribute Attributes names in lower case Values assigned with = Values should be in “ ”

39. Document Structure HTML

40. HTML: Document structure HTML HEAD – information about the Web page. BODY – the actual contents of the Web page

41. HTML: Document structure

42. HTML: Document structure

43. Document Type Definition (DTD) A DTD – “defines the legal structure, elements, and attributes that are available for use in a document that complies to the DTD." Definition of what is legal syntax in HTML and what isn't.

44. HTML: Document structure Hello World, it's our first page! Hello, world!

45. HTML 5: Document structure Hello World, it's our first page! Hello, world!

46. Tags That Should Be in Every HTML Document … …. …

47. Tag Reminds the browser that the document is a HTML document ….

48. Tag Gives the browser information about the document Comes after the tag ….

49. Tag Places information in the title bar of the browser’s window, used by search engines optimization (SEO). ….

50. Comment Tag Text that shows up in the HTML source code, but does not show up in the browser window

51. Tag All the information between the body tags appears in the browser’s window …

52. By the Sea> This is the title… Categories Archives

53. Visual vs. Structural Markup

54. Visual vs. Structural HTML - evolved from original version with tags suitable for marking up scientific papers. Recent versions emphasize structural markup, but there are visual markup features left over from earlier versions.

55. Block boxes and inline boxes Block boxes and inline boxes—that correspond to the two types of tags—block- level and inline tags.

56. Block boxes and inline boxes A block-level tag creates a break before and after the element.,, etc. Inline tags don’t create a break before or after element.,,,,

57. Block boxes and inline boxes Inline tags don’t create a break before or after element. ”Mapping Temporal Relations of Discussions Software is a powerful tool”(Miller, 2010, p. 45), it can be used on …

58. Structural: Block-Level Elements p – paragraphs h1, h2,…,h6 – level 1, 2,…,6 headers blockquote – long quotations (not indented paragraphs) pre – pre-formatted text div – arbitrary division OL, UL, DL - list for tabular data

59. Structural: Paragraph Tag … Gives the appearance of paragraphs

60. In the summer of 2008, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations.

61. Structural: Heading Levels Groups information into major points … Biggest heading level … Smallest heading level

62. Structural: Heading Levels Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

63. In the summer of 2009, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations. Introduction Educational Conversations

64. ul – unordered list ol – ordered list li – list element dl – definition list Use pairs of dt (term) and dd (definition) elements within dl Structural: HTML Lists

65. Structural: Unordered Lists Apples Oranges Pears

66. Structural: Unordered Lists Apples Oranges Pears

67. Structural: Ordered Lists Apples Oranges Pears

68. Structural: Ordered Lists 1. Apples 2. Oranges 3. Pears

69. Table elements contain tr (row) elements containing td (data, i.e. cell) elements Tables are very commonly used for page layout Structural: HTML Tables Row 1Col 1 Row 2 Col 1

70. Row 1Col 1 Row 2 Col 1

71. Row 1 Column 1 Row 2 Column 1

72. Making Links & Color

73. Linking to Another Document Null links This is a NULL link

74. Linking to Another Document Text that acts as the link This anchor links to a document in the same folder as the current web page.

75. Linking to a Specific Section of Another Document Text that acts as the link This anchor links to a specific section of the document.htm page, which is in the same folder and the current web page.

76. Linking to a Specific Section of Another Document Read Books This anchor links to the document.htm page, which is in a folder titled books.

77. Linking to a Specific Section of Another Document Read Books This anchor links to an external web site.

78. Linking to Another Web Site Yahoo http://www.yahoo.com

79. Color Equivalent RED FF0000 RED FF0000 GREEN 00FF00 GREEN 00FF00 BLUE 0000FF BLUE 0000FF MAGENTA FF00FF MAGENTA FF00FF CYAN 00FFFF CYAN 00FFFF YELLOW FFFF00 YELLOW FFFF00 BLACK 000000 BLACK 000000 WHITE FFFFFF WHITE FFFFFF baker's chocolate (5C3317) baker's chocolate (5C3317) semi-sweet chocolate (6B4226) semi-sweet chocolate (6B4226)

80. Color Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF)

81. Color Hexadecimal value: FF0000 FF 00 00 Red Green Blue