1 HTML/XHTML Objectives Explain what HTML is and how Web pages use HTML Explain what HTML is and how Web pages use HTML Demonstrate how to create Web pages with nothing more than a text editor and a browser Demonstrate how to create Web pages with nothing more than a text editor and a browser Explore the role of HTML standards on the Web Explore the role of HTML standards on the Web Tags of HTML/XHTML Tags of HTML/XHTML –Focus on XHTML –Will mention differences
2 To Create a Web Site You Need Computer with modem or telecommunication devices Computer with modem or telecommunication devices A text editor (or Web page construction kit) A text editor (or Web page construction kit) –Notepad –Free An Internet access account An Internet access account A password-protected account on a Web server A password-protected account on a Web server
3 Uniform Resource Locator (URL) All Web pages are addressed with URLs All Web pages are addressed with URLs The URL specifies The URL specifies –A server name –A directory path faculty_staff/huen –A filename home.html URLs are part of the HTTP (Hypertext Transfer Protocol) communications protocol. URLs are part of the HTTP (Hypertext Transfer Protocol) communications protocol.
4 Web Page Displays All browsers are designed to display files with.html and.htm extensions All browsers are designed to display files with.html and.htm extensions Web pages can look a little different on different computers Web pages can look a little different on different computers Web page authors cannot completely control their page displays Web page authors cannot completely control their page displays
5 The Hypertext Markup Language (HTML) HTML formatting commands control Web page displays HTML formatting commands control Web page displays All HTML formatting is achieved with HTML elements All HTML formatting is achieved with HTML elements All HTML elements are based on HTML tags and tag-pairs All HTML elements are based on HTML tags and tag-pairs HTML files can be created with text editors HTML files can be created with text editors
6 A HTML TagTemplate <html><head><title> (insert text for the browser’s title bar here) (insert text for the browser’s title bar here)</title></head><body> (insert visible Web page elements here) (insert visible Web page elements here)</body></html>
7 HTML Editors Example: Homesite (Macromedia/Coldfusion) Example: Homesite (Macromedia/Coldfusion) Pros Pros –Offer lots of useful features –Help you avoid tagging errors –Can save time Cons Cons –Can interfere with HTML mastery
8 The Web Page Development Cycle 1. Save your HTML file 2. Load the file into your Web browser 3. Review the file with your Web browser 4. Validate your HTML script 5. Revise your HTML file with a text editor Repeat this cycle as often as needed
9 Non-Standard HTML Browser vendors create their own HTML extensions to influence the industry standard Browser vendors create their own HTML extensions to influence the industry standard Browser-specific: Some vendor provide HTML tags extensions specific to their own product Browser-specific: Some vendor provide HTML tags extensions specific to their own product Netscape Navigator and IE do not always recognize each other’s HTML extensions Netscape Navigator and IE do not always recognize each other’s HTML extensions Web pages that use non-standard HTML may not display well for all users Web pages that use non-standard HTML may not display well for all users
10 Origins and Evolution of HTML HTML was defined with SGML (Standard Generalized Markup Language) HTML was defined with SGML (Standard Generalized Markup Language) Original intent of HTML: General layout of documents displayable by a wide variety of computers Original intent of HTML: General layout of documents displayable by a wide variety of computers Recent versions: Recent versions: –HTML 4.0 – 1997 Many new features and deprecated many older features Many new features and deprecated many older features –HTML A cleanup of 4.0
11 Browser War User’s experience varies with the browser User’s experience varies with the browser Developers need to provide multiple versions of a page Developers need to provide multiple versions of a page Standardization began with HTML 3.2 Standardization began with HTML 3.2 HTML 4 and CSS HTML 4 and CSS –Separate structure and format XML to add new features XML to add new features –XML: language to create new languages
12 XML Labeled data reusable Labeled data reusable Price paid Price paid –Case sensitive –Quotation marks –Closing tags –Backward compatible with HTML? Rewrite HTML in XML Rewrite HTML in XML –Developers learn basic syntax rules So xhtml is born So xhtml is born
13 Evolution of HTML XHTML 1.0 – 2000 XHTML 1.0 – 2000 –Reformulate HTML 4.01 in XML, instead of SGML –Will follow XHTML 1.0 Strict XHTML 1.1 – 2001 XHTML 1.1 – 2001 –Modularize 1.0, and drops frames –Very similar to XHTML Strict
14 Industry Standards Most HTML tags are in the official HTML standard Most HTML tags are in the official HTML standard All HTML-compliant browsers recognize the standard HTML tag set All HTML-compliant browsers recognize the standard HTML tag set The World Wide Web Consortium (W3C) sets the industry standard for HTML The World Wide Web Consortium (W3C) sets the industry standard for HTML
15 HTML Validation Services Validation services on the Web can check an HTML file for you Validation services on the Web can check an HTML file for you – (recommended, free, official) (recommended, free, official) – (commercial) – (commercial) To identify tagging errors and HTML extensions To identify tagging errors and HTML extensions Some HTML tagging errors are difficult to locate by manual inspection Some HTML tagging errors are difficult to locate by manual inspection Without an HTML editor, a validation service can be very helpful Without an HTML editor, a validation service can be very helpful
16 Shortcut Use xhtml template Use xhtml template See template.html See template.html