Transcript PPT
The Internet & Web Objectives The Internet & Web HTML/XHTML Project portfolio page Useful web sites Color http://www.colorjack.com/ http://kuler.adobe.com/#create/fromacolor Type: http://www.typetester.org/ 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. 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. 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 Growth of Internet in the 1990s 1. Removal of ban on commercial activity 2. Creation of Web by Tim Berners-Lee at CERN • 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 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. Client/Server Client Server Web Page Internet Protocols Protocols • Rules for clients and servers to communicate with each other. There are number of protocols with specific functions. 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. 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 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. 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 Top-Level Domain Name A top-level domain (TLD)- the suffix of domain name. Current generic TLDs: .edu, .com, .org, .net, .mil, .gov County Code Two character codes to indicate the geographical location (country) of the web site. Examples: • .tv (Tuvalu), .ws (Samoa), .au, .jp, .uk Uniform Resource Locator Computer/Server name Parent folder name Your User folder name Pub folder name Class folder name Name of Web page – file name URL Address of a resource on the Internet. Uniform Resource Locator URL Specifies: • location of the document • protocol used to retrieve document • http://www.duq.edu/home.html Web Standards (W3C Consortium) W3C – World Wide Web Consortium • Offer recommendations related to the Web • Produces specifications/Recommendations that help standardize web technologies 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/ Accessibility Section 508 of the Rehabilitation Act • 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). HTML: Background Web development 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 What is Html/Xhtml? XHTML is a cleaner and clearer standard compared to early versions of HTML. HTML 5 offers new elements for better structure, drawing, media content, and handling of forms. • Nav Article Section Aside Footer What is Html/Xhtml? HTML 4.01 Not case-sensitive Works without ending tag </P> Overlapping tags XHTML 1.0 All lowercase Tags in pairs <p></p> Tag do not overlap HTML/XHTML HTML: <br> XHTML: <br /> HTML: <img src=“FileName.jpg”> XHTML & HTML5: <img src=“FileName.jpg” Alt=“Descriptor” /> HTML: <TITLE></title> XHTML: <title></title> HTML Elements HTML markup divides a document into elements (i.e., paragraphs). <p>This is paragraph one….</p> <p>This is paragraph one….</p> Element Content Element 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 HTML Element's start tag is name enclosed in angle brackets: <p>, <h1>, <div>, … • XHTML names = lower-case letters and numbers Element's end tag name preceded by a slash, enclosed in angle brackets: </p>, </h1>, </div>,… HTML: Tags Hypertext MarkUp Language - HTML Tags generally come in pairs. <html> </html> Beginning Tag Ending Tag HTML Tags Empty elements have start and end tags run together: <img />, <hr />,… Empty elements such as: • <hr /> • <br /> • <img /> Horizontal rule Line break Image Special characters <html> </html> = <html> </html> & = & ¡ = ! © = © HTML: Attributes Attributes or properties have Values color = “blue” width = “12ft” HTML: Attributes Tags <img src=“car.jpg” /> HTML: Attributes Attributes Attribute or Properties Value of attribute <img src=“car.jpg” width= “45” alt=“Dodge Viper” /> Attributes names in lower case Values assigned with = Values should be in “ ” Document Structure HTML HTML: Document structure HTML HEAD – information about the Web page. BODY – the actual contents of the Web page HTML: Document structure <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> HTML: Document structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title> </title></head> <body> </body> </html> 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 XHTML and what isn't. HTML: Document structure <!DOCTYPE…> <html> <head> <title> Hello World, it's our first page!</title> </head> <body> <p>Hello, world!</p> </body> </html> HTML 5: Document structure <!DOCTYPE HTML> <html> <head><title> Hello World, it's our first page!</title></head> <body> <section> <article> <nav></nav> <p>Hello, world!</p> </article> </section> </body> </html> Tags That Should Be in Every HTML Document <html>…</ html > <head>…</head> <title>….</title> <body>…</body> <HTML> Tag Reminds the browser that the document is a HTML document <html>….</html> <HEAD> Tag Gives the browser information about the document Comes after the <HTML> tag <head>….</head> <TITLE> Tag Places information in the title bar of the browser’s window <title>….</title> Comment Tag Text that shows up in the HTML source code, but does not show up in the browser window <! - - Comments go here - - > <BODY> Tag All the information between the body tags appears in the browser’s window <body>…</body> Visual vs. Structural Markup 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. Block boxes and inline boxes Block boxes and inline boxes—that correspond to the two types of tags—blocklevel and inline tags. Block boxes and inline boxes A block-level tag creates a break before and after the element. <p> <h>,<div>, etc. Inline tags don’t create a break before or after element. <span>, <em>, <strong> <cite>, <abbr>,<kbd> Block boxes and inline boxes Inline tags don’t create a break before or after element. <cite> <cite>”Mapping Temporal Relations of Discussions Software is a powerful tool”(Miller, 2010, p. 45)</cite>, it can be used on … 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 <table> for tabular data Structural: Paragraph Tag <p>…</p> Gives the appearance of paragraphs <p> 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. </p> <p> 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. </p> Structural: Heading Levels Groups information into major points <h1>…</h1> Biggest heading level <h6>…</h6> Smallest heading level Structural: Heading Levels <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6> <h1> Introduction</h1> 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. <h2> Educational Conversations</h2> 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. Structural: HTML Lists ul – unordered list ol – ordered list li – list element dl – definition list • Use pairs of dt (term) and dd (definition) elements within dl Structural: Unordered Lists <UL> <LI>Apples</LI> <LI>Oranges</LI> <LI>Pears</LI> </UL> <LI TYPE=round> <LI TYPE=disc> <LI TYPE=square> Structural: Unordered Lists •Apples •Oranges •Pears Structural: Ordered Lists <OL> <LI>Apples</LI> <LI>Oranges</LI> <LI>Pears</LI> </OL> <OL TYPE=“A”> <OL TYPE=“a”> <OL TYPE=“I”> <OL TYPE=“i”> <OL TYPE=“1”> Structural: Ordered Lists 1. Apples 2. Oranges 3. Pears Structural: HTML Tables Table elements contain tr (row) elements containing td (data, i.e. cell) elements Tables are very commonly used for page layout <table> <tr><td>Row 1Col 1</td></tr> <tr><td>Row 2 Col 1</td></tr> </table> <table> <tr><td>Row 1Col 1</td></tr> <tr><td>Row 2 Col 1</td></tr> </table> Row 1 Column 1 Row 2 Column 1 Making Links & Color Linking to Another Document Null links <a href =“#”>This is a NULL link</a> Linking to Another Document <a href =“document.htm”>Text that acts as the link</a> This anchor links to a document in the same folder as the current web page. Linking to a Specific Section of Another Document <a href=“document.htm#SectionTitle”>Text that acts as the link</a> <a name=“SectionTitle”> </a> This anchor links to a specific section of the document.htm page, which is in the same folder and the current web page. Linking to a Specific Section of Another Document <a href=“books/document.htm”>Read Books</a> This anchor links to the document.htm page, which is in a folder titled books. Linking to a Specific Section of Another Document <a href=“http://www.cnn.com”>Read Books</a> This anchor links to an external web site. Linking to Another Web Site <a href=“http://www.yahoo.com”>Yahoo</a> Color Equivalent RED FF0000 GREEN 00FF00 BLUE 0000FF MAGENTA FF00FF CYAN 00FFFF YELLOW FFFF00 BLACK 000000 WHITE FFFFFF baker's chocolate (5C3317) semi-sweet chocolate (6B4226) 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) Color Hexadecimal value: FF0000 FF Red 00 00 Blue Green