XHTML BasicsHypertext Markup LanguageHypertext Markup Language (cont.)Slide 4Extensible Hypertext Markup LanguageWhat is XHTML?What is XHTML? (cont.)What’s wrong with HTML?XHTML vs. CSS vs. JavaScriptWriting XHTMLWriting XHTML (cont.)Slide 12Slide 13XHTML editorsXHTML editors (cont.)Slide 16XMLDocument Type Definition (DTD)The DOCTYPE declarationThe DOCTYPE declaration (cont.)First Web Page – Step 1The <html> element (see p. 24)XHTML <head> and <body> tags Step 2The <head> and <body> elements (cont.)The <title> elementThe <title> element (cont.)Character encoding – meta tag (see p. 27)Character encoding – meta tag (cont.)Tags and elementsTags and elements (cont.)Container elementsEmpty elementsEmpty elements (cont.)Element attributesNested elementsNested elements (cont.)Types of elementsTypes of elements -- Block-level elementsTypes of elements -- Replaced elementsTypes of elements -- Inline elementsTypes of elements (cont.)Creating an XHTML fileSlide 43Slide 44Using Notepad to create an html fileUnderstanding whitespaceUnderstanding whitespace (cont.)Whitespace illustratedAnother Whitespace exampleWhitespace noteViewing XHTML locallyViewing XHTML locally (cont.)XHTML elements presentedA template for XHTML filesSummary of XHTML rulesXHTML BasicsModified by Linda Kenney2/12/0801/14/19 XHTML 2Hypertext Markup LanguageIn order to have a World Wide Web, there must be some way for a human creating a Web page to give the browser guidance in how that page should be rendered.That’s exactly the job for which markup languages are used.01/14/19 XHTML 3Hypertext Markup Language (cont.)Hypertext Markup Language (HTML) is the language originally designed for this purpose.HTML was invented in 1989 by Tim Berners-Lee as the markup language that would allow authors to tell browsers how to handle the contents of each Web page.It consists of a set of codes called tags that are embedded within the text that makes up the page’s content.01/14/19 XHTML 4Hypertext Markup Language (cont.)The tags and content are both text, so they are simply stored in a text file and delivered to the browser whenever requested.The browser examines the contents of the requested file and uses the tags embedded within it to determine how best to render the page.HTML has evolved through numerous versions since 1989.01/14/19 XHTML 5Extensible Hypertext Markup LanguageExtensible Hypertext Markup Language (XHTML) was introduced in 2000 to replace HTML.In its initial version, XHTML was very similar to the final version (4.01) of HTML.This was because the really important differences were hidden behind the scenes.In this course we will be learning XHTML, not HTML.01/14/19 XHTML 6What is XHTML?XHTML uses the tags and attributes of HTML along with the syntax of XML (eXtensible Markup Language). XHTML was developed by the W3C to be the reformulation of HTML as an application of XML.NOTE: The World Wide Web Consortium sets the standards for HTML and its related languages.(http://w3c.org )01/14/19 XHTML 7What is XHTML? (cont.) While many web pages and web authoring tools still use HTML, as a web developer you need to learn about XHTML – you will be seeing a lot of it in the future.01/14/19 XHTML 8What’s wrong with HTML?The Web has changed from a medium used to display electronic versions of paper documents to a medium that provides diverse information for a variety of devices.HTML does not fit this need.HTML is a structural language – it was originally intended to markup printed documents for online viewing. With the expansion of the Web to include devices other than personal computers, the need for a descriptive rather than structural language became evident and XHTML was created.01/14/19 XHTML 9XHTML vs. CSS vs. JavaScriptUse XHTML to code the content of a page.Use CSS to code the presentation of a page.Use JavaScript to code interactivity and dynamic behavior.01/14/19 XHTML 10Writing XHTMLSince tags and their contents both consist of nothing but text, an XHTML file is essentially just a text file.01/14/19 XHTML 11Writing XHTML (cont.)To write XHTML all you need is a text editor.A text editor is a relatively simple software program for creating, viewing and editing text files.Of course, to see the results of your efforts, you also need a browser to render the XHTML you write.And you may need another program or two to actually publish your XHTML files on the Web.01/14/19 XHTML 12Writing XHTML (cont.)The XHTML that we write is generally referred to XHTML source.The process of writing XHTML is often referred to as authoring (not programming).01/14/19 XHTML 13Writing XHTML (cont.)So the process of authoring XHTML simply involves entering (or editing) your XHTML source in a text editor and saving the results as a text file with a name ending in .htmlThe process of publishing the results, however, will require a few additional steps.You may use any text editor you wish to complete your work for this course.For consistency and simplicity, however, I will usually use Notepad and / or Textpad when I demonstrate things in class.01/14/19 XHTML 14XHTML editorsXHTML editors exist for the specific purpose of creating and editing XHTML documents.01/14/19 XHTML 15XHTML editors (cont.)We are not going to use them in this class for several reasons.Our goal is to learn XHTML, and the goal of a good XHTML editor is to write XHTML for us.Obviously, you can’t learn it well by letting a program do it for you.And you won’t have the program available for exams!XHTML editors can limit your options.If all you know is how to use the editor, you can only do the things the editor lets you do.XHTML editors don’t always write good XHTML.In this course, an error is an error, regardless of whether it’s your error or your editor’s error.Learning to use a specific XHTML editor is only useful if you intend to purchase and keep using that editor.Learning XHTML is useful regardless of how you choose to continue using it.01/14/19 XHTML 16XHTML editors (cont.)That doesn’t mean that XHTML editors are not good; just that we won’t be using them in this course.Many professional Web authors use XHTML editors for certain parts of their projects.My recommendation, should you wish to experiment, is Macromedia Dreamweaver or FrontPage.01/14/19 XHTML 17XMLAn XML document must be well-formed.Use lowercaseUse opening and closing tags<body>
View Full Document
Unlocking...