1 / 40

Today’s objectives

Today’s objectives. Useful sites Meaningful markup Review | The Internet & Web Review | HTML/XHTML Create web page. Useful web sites. Browser compatibility (www.webdevout.net/) Browser compatibility  Color http://www.colorjack.com/

giza
Download Presentation

Today’s objectives

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Today’s objectives • Useful sites • Meaningful markup • Review | The Internet & Web • Review | HTML/XHTML • Create web page

  2. Useful web sites • Browser compatibility (www.webdevout.net/) • Browser compatibility  Color • http://www.colorjack.com/ • http://kuler.adobe.com/#create/fromacolor (image upload) Create/edit layered bitmapped images: http://www.sumopaint.com/home/ Test font types: • http://www.typetester.org/

  3. The Internet & Web

  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. • Extranet: Private network that shares portions of organization’s information with external partners.

  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 • Use originally limited to government, research, and academic use (scientific papers unlike web pages today) • NSFnet • National Science Foundation

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

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

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

  10. Protocols • FTP: Rules that allow files to be exchanged. • HTTP: Rules for exchanging files (text, graphic images, sound, video) on the Web.

  11. 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

  12. Finding Your IP Address Windows Command Prompt • >ipconfig • >getmac (Mac Address) Vista • Control panel>>Network & Sharing>>View Status Local Area Connection.

  13. 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

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

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

  16. 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.

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

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

  19. 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 Guidelineshttp://www.w3.org/WAI/WCAG20/quickref/

  20. 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).

  21. HTML: Background Web development

  22. HTML: Background • HTML and XHTML • Document Structure

  23. What is Html/Xhtml? • Intertwined languages • HTML (4.01) is subsumed as XHTML 1.0 • The Extensible HyperText Markup Language (XHTML) extends HTML - reformulated in XML. • XHTML is HTML reformulated to adhere to XML standards

  24. What is Html/Xhtml? • XHTML is XML-based, designed to work in conjunction with XML-based user agents. • XHTML is a cleaner and clearer standard.

  25. What is Html/Xhtml? HTML 4.01 XHTML 1.0 • Not case-sensitive • Works without ending tag </P> • Overlapping tags • All lowercase • Tags in pairs <p></p> • Tag do not overlap

  26. HTML/XHTML • HTML: <br> • XHTML: <br /> • HTML: <img src=“FileName.jpg”> • XHTML: <img src=“FileName.jpg” Alt=“Descriptor” /> • HTML: <TITLE></title> • XHTML: <title></title>

  27. 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

  28. HTML • Each individual markup code <p></p> 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

  29. HTML: Tags • Hypertext MarkUp Language - XHTML Tags generally come in pairs. Beginning Tag <html> </html> Ending Tag

  30. HTML Tags • Most html have beginning and ending tags • Exceptions include empty elements such as: • <hr /> • <br /> • <img />

  31. HTML: Attributes • Attributes Value of attribute Attribute or Properties <img src=“car.jpg” width= “45” alt=“Dodge Viper” /> Attributes names in lower case Values assigned with = Values should be in “ ”

  32. HTML: Attributes • Meaningful graphics should have ALT text for accessibility <img src=“car.jpg” width= “45” alt=“Photo of A. Lincoln at Gettysburg” />

  33. Document Structure XHTML

  34. <html> <head> </head> <body> </body> </html> HTML: Document structure

  35. HTML: Document structure <!DOCTYPE…> <html> <head> <title> Hello World, it's our first page!</title> </head> <body> <p>Hello, world!</p> </body> </html>

  36. Document Type Definition (DTD) • W3C Recommends using a Document Type Definition to identify the type of markup language used in a web page.

  37. 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.

  38. Document Type Definition (DTD) There are a few versions of XHTML. • XHTML 1.0 Strict. Similar to HTML 4.01, XML syntax rules are enforced, improves load times and search indexing. • XHTML 1.0 Transitional uses same syntax as Strict. Can use elements for older versions of HTML <center>, <u>, <b> and <strike> tags.

  39. Document Type Definition (DTD) XHTML 1.0 Transitional This is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts. XHTML 1.0 Strict Requires exclusive use of Cascading Style Sheets. XHTML 1.0 Frameset Required for pages using XHTML frames.

  40. Document Type Definition (DTD) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

More Related