Introduction to XHTML

1. Introduction to XHTML

2. Introduction • Web developers view web pages as documents that must be created according to authoring and development guidelines • Web developers use HTML or XHTML to write code of a web page • Web browsers have a built-in interpreter to render the results of the code in its window

3. What is the World Wide Web • The World Wide Web (WWW) is most often called the Web. • The Web is a network of computers all over the world. • All the computers in the Web can communicate with each other. • All the computers use a communication standard called HTTP.

4. How does the  WWW work? • Web information is stored in documents called Web pages.  • Web pages are files stored on computers called Web servers. • Computers reading the Web pages are called Web clients. • Web clients view the pages with a program called a Web browser. • Popular browsers are Internet Explorer and Mozilla Firefox & Chrome.

5. Web Browsers and Web Servers The Web browser makes a request to the web server The server which is running an HTTP server that is listening for requests, receives the request and locates the document. The server then sends back the content of the requested page to the client. The browser receives the information from the server and displays the page in the browser window. The transaction is now complete.

6. How to Fetch Web Pages A browser fetches a Web page from a server by a request. A request is a standard HTTP request containing a page address. A page address looks like this: http://www.ibm.com/index.htm.

7. Uniform Resource Locator (URL) • All Web pages are addressed with URLs • The URL specifies • A server name • A directory path • A filename • URLs are part of the HTTP (Hypertext Transfer Protocol) communications protocol.

8. Jargon URL: Uniform Resource Locator W3C: World Wide Web Consortium HTML: Hyper-Text Markup Language DOCTYPE: Document Type Declaration XHTML: Extensible Hyper-Text Markup Language CSS: Cascading Style Sheets

9. Web Page Displays All browsers are designed to display .html and .htm files Browsers have to rework their page displays whenever a browser window is resized Web pages can look a little different on different computers Web page authors cannot completely control their page displays

10. How does the browser display the pages? All Web pages contain instructions for display The browser displays the page by reading these instructions. The most common display instructions are called XHTML tags. XHTML tags look like this<h1>This is a heading</h1>.

11. The World Wide Web • Definitions • HTML • The HyperText Markup Language • The language used to structure text-based information in a document • by denoting certain text as headings, paragraphs, lists, etc — and to supplement that text with interactive forms, embeddedimages, and other multimedia objects • XHTML • The eXtensibleHyperText Markup Language • XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML. • Allows users to define their own “tags” for defining structure, layout, etc.

12. Content of Web Pages • A web site may contain a combination of 13 standard elements: Text Sound Lists Video Hyperlinks Tables Colour Layers Graphics Frames Images Forms Image Maps

13. Content of Web Pages • The content of a web site can be classified as: • Static content – does not change regularly e.g. personal and professional web sites • Dynamic content – changes regularly e.g., newspaper web sites, weather report sites…

14. Authoring of Web Pages • After a web page layout is designed, one needs to use HTML/XHTML code to implement the design • Introduction to XHTML • Syntax • Document Tags • Authoring tools • Text formatting • Special characters • Hyperlinks • Lists • Meta Data • Colours • Audio & Video

15. XHTML Syntax • XHTML uses tags that are enclosed in brackets < > • XHTML content is contained between tags • Tags and content form an XHTML element • Generic element form: <start-tag> content <end-tag> • Start and end tags have the same name, end tag has a ‘/’ before it: <b>This is BOLD</b> • XHTML tags can be nested according to the “first open, last closed” rule: <b><i>bold and italic</i></b>

16. XHTML Syntax • XHTML rules • Tags must be closed • XHTML is case sensitive • Use lower case tags and attribute names, e.g. width=“100%” • All attribute values must be double quoted, e.g. “100%” • Tags must not overlap (i.e., during nesting) • Comments can be used • <!-- This text is a comment --> • Do not use obsolete (deprecated)tags • Browsers ignore misspelled tags (and many other things!)

17. The eXtensible Hypertext Markup Language (XHTML) XHTML formatting commands control Web page displays All XHTML formatting is achieved with XHTML elements All XHTML elements are based on XHTML tags and tag-pairs XHTML files can be created with text editors

18. Elements of a Page Doctype Head Title Body HTML

19. Tags DOCTYPE <HTML> <HEAD> <TITLE> stuff</TITLE> </HEAD> <BODY> <P>stuff that people see</p> </BODY> </HTML>

20. DOCTYPE – Avoid Quirks! Versions: Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

21. HEAD • <TITLE> </TITLE> • <META> </META> • Language, Encoding, Keywords • Self-closing • <meta Content> </meta> • <meta Content /> Page Properties

22. A HTML Tag Template <html> <head> <title> (insert text for the browser’s title bar here) </title> </head> <body> (insert visible Web page elements here) </body> </html>

23. Who is making the Web standards? The Web standards ( rule-making body )of the Web is the W3C. It is notmade up by Mozilla or Microsoft. W3C stands for the World Wide Web Consortium. W3C puts together specifications for Web standards. The most essential Web standards are XHTML, CSS and XML. The latest HTML standard is XHTML 2.0

24. Markup Languages • SGML stands for “Standard Generalized Markup Language” and was developed in the 1960’s as the first standardized markup language • HTML was developed in the early 1990’s as a lightweight application of SGML for transporting documents over HTTP • HTML documents were portable among different operating systems and computer applications • XML was developed to address the limitations of HTML • XML is a meta-language, or a set of rules, for building other languages • XML and HTML are both SGLM applications • XHTML is the successor of HTML

25. Origins of Markup Languages

26. Overview of XHTML • The first version of XHTML 1.0, was released in 2000 • W3C description of XHTML : • XHTML 1.0 reformulates HTML as an XML application. This makes it easier to process and easier to maintain. XHTML 1.0 borrows elements and attributes from W3C's earlier work on HTML 4, and can be interpreted by existing browsers, by following a few simple guidelines. This allows you to start using XHTML now! • XHTML is extensible meaning that its element set is not finite, like that of HTML. Additional elements or other XML-based languages can be integrated with XHTML • XHTML consists of the element set of HTML reformulated to adhere to the syntax rules of XML • XHTML is compatible with existing web browser technology and will be compatible with future XML-based clients

27. Building XHTML Documents Content Start Tag End Tag • Elements consist of a start tag, content and an end tag: <h1>Introduction to XHTML</h1> • Empty elementsare used to describe elements that do not have any content: <br /> • Attributes are used to describe elements and are placed inside the open tag of an element: <imgsrc=“picture.jpg” alt= “This is my picture” /> alt attribute specifies an alternate text for an image • Comments are used to notate the document, but are not processed by parsers: <!-- This is a comment -->

28. Three Flavors of XHTML 1.0 XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Frameset This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

29. Document Tags The tags that make up the framework of a typical XHTML document include the following: • Document type definition (DTD) tag – DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • Describes (to web browsers) what type/version of (x)html is used • Specifies rules that apply to the markup of documents • Used for document syntax validation (e.g. strict) and for web browser to process document in proper “parsing” mode (impacts on consistency and speed of display) • An XHTML document is validated against a Document Type Definition. • Top-level tag, generally <html> • Tag indicates the beginning and /end of an XHTML document

30. Document Tags - Header • Header section, delimited by <head> tags • Provides extra information about the document • Serves as a container for styles, global scripts, etc. • The main tags used in this section are: • <title> - specifies the document title • <meta> - provides information to search engines • <style> - declares general & local styles for the document • <script> - declares any scripting information

31. Meta Tags • Web pages are designed for surfers and surf engines • The <meta> tag increases the chances of page indexing • Meta data refers to data about XHTML document rather than the document content • Browsers do not render meta data • Search engines use it for indexing and ranking the page hits in a given search • Some attributes of this tag are name, content, http-equiv, etc.

32. Meta Tags • Most often the meta element is used to provide information that is relevant to browsers or search engines like describing the content of your document. <meta name=“keywords” content=“open, source, PHP, programming, code” /> • When a search engine indexes the page, it includes the extra information -> open, source, etc. • It provides these keywords to search agents requesting them

33. Amazon’s Meta Tags <meta name="description" content="Low prices on digital cameras, MP3, LCD TVs, books, music, DVDs, video games, software, home & garden and much, much more. Free delivery on orders over $15." /> <meta name="keywords" content="digital camera, LCD TV, books, DVD, low prices, video games, pc games, software, electronics, home, garden, video, amazon" />

34. META • Specify information about a document • Attribute name • Identifies the type of meta element • “keywords” ( name =“keywords” ) • Provides search engines with a list of words that describe a page • “description” ( name = “description” ) • Provides a description of a site • Attribute content • Provides the information search engine use to catalog pages

35. Sample XHTML Document Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> webpage content goes here! </BODY> </HTML>

38. HTML element HTML element HTML element HTML element Minimal XHTML Document <!DOCTYPE ….><html> <head>…..</head> <body> <p> ……. </p></body></html>

39. XHTML Document Example <?xmlversion=”1.0”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns=”http://www.w3.org/1999/xhtml”> <head> <title>Introduction to XHTML</title> </head> <body> <strong>Course Name: </strong> Introduction to XHTML<br /> <strong>Course Number: </strong> CS 112 <br /> <strong>Instructor: </strong> T. Perdue <br /> <strong>Meeting Time: </strong> Wednesday, 5:30pm–7:30pm <br /> <p /> <strong>Course Description: </strong> This course covers the basics of how to write XHTML Web documents. <p /> <strong>Prerequsites: </strong> <ul> <li>CS 101—Introduction to Computers </li> <li>CS 103—Introduction to Web Site Design </li> <li>CS 110—Designing Web Pages with HTML </li> </ul> </body> </html>

40. XHTML Document Example

41. Using TextPad TextPad is an editor that allows you to type text. Can be used to create web pages View in Web browser file name

42. View in browser

43. Validating your pages XHTML shouldn’t contain any deprecated (old and out of date) tags. Needs to be well formed (see slide 25) Needs to reference a DTD (DOCTYPE)(Document Type Definition) Prefers that character encoding is declared (for transitional – is required for strict) Validate documents online at the W3C’s Validator website: http://validator.w3.org

44. Validating your pages Choose File Upload Browse to find file Then click here Get this screen if code is valid http://validator.w3.org

45. Validating XHTML Documents Valid documents must be well-formed and adhere to the rules of a DTD: • XHTML Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • XHTML Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> • XHTML Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

46. Well-Formed XHTML Documents XHTML documents must contain the root element <html> All elements must have a start and end tag, or must be an empty element Elements must be nested properly All attributes must have a value Attributes must be placed in the start tag Element names are case sensitive

47. Class Activity 1 Type the following xhtml code in Text pad, validate it and then view it in a browser <html> <head> <title>The First Page in these notes</title> </head> <body> <h1>Your text goes here or possibly images</h1> <p><strong> Or it could go here</strong></p> </body> </html>

48. Class Activity 1 Now edit the code to look like this and validate it and then view in a browser <?xml version=”1.0”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=”http://www.w3.org/1999/xhtml” > <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1“ /> <title>The First Page in these notes</title> </head> <body> <h1>Your text goes here or possibly images</h1> <p><strong> Or it could go here</strong></p> </body> </html>

49. XHTML - Basic Formatting

50. XHTML Tags & Attributes The following slides do not contain a complete list of available tags and attributes for XHTML Refer to the web sitehttp://www.w3schools.com/xhtml/default.asp To access a full list of the standards associated with XHTML