1. ULI101 – XHTML Basics (Part II) What is Markup Language? XHTML vs. HTML General XHTML Rules Block Level XHTML Tags XHTML Validation

2. Markup Language  Before we can talk about xHTML, we need to understand what a Markup Languages is. A markup language refers to the use of characters within a piece of information that can be used to process or identify that information in a particular way.  When the above is viewed in a browser (IE or Netscape), what in fact the browser is doing is interpret the markup elements and display the content. Some Title Display this in a heading 1 definition Display this in normal text definition.

3. Markup Language  There are a number of different markup languages and types. To appreciate and understand why XML was developed, one has to get a general understanding of the Standard Generalized Markup Language (SGML) and its relationship with HTML. SGML is the grandfather of all markup languages.

4. To Summarize: SGML is a very powerful language for document display. It is a very powerful language, but it is difficult to fully understand. SGML, has the advantage of creating other easier-to-use web- programming languages like HTML, XML, and XHMTL. HTML is an easy-to-use language designed to display data, but has limitations of displaying complex data (like databases). New devices such as PDA’s and mobile phones do not have the resources to interpret HTML if written with mistakes.

5. XHTML  XHTML 1.0 brings the Web of the future to content authors today. It is a reformulation of HTML 4 in XML, bringing the rigor of XML to HTML, and can be put to immediate use with existing browsers by following a few simple guidelines. W3C's work in XHTML helps create standards that provide richer Web pages on an ever-increasing range of browser platforms including cell phones, televisions, cars, wallet-sized wireless communicators, etc...

6. XHTML To write XHTML you need to use the XML syntax, which is slightly different from that of the HTML you use today. What are the differences? XML requires you to: include the correct DOCTYPE declaration at the beginning of the file The more forgiving, more backwards-compatible version of XHTML The more rigorous, more XML-style version of XHTML DTD for frames add the attribute xmlns="http://www.w3.org/1999/xhtml" to the tag make element and attribute names case-sensitive. XHTML uses lowercase include end tags e.g. and add a / to empty elements, e.g. and quote all attribute values, e.g. End special escape codes with semi-colon (eg. &)

7. General XHTML Structure  Here is an example of an XHTML web page using the transitional DOCTYPE:   Sample Title  Contents of webpage DOCTYPE (Transitional) Beginning and ending HTML tags File Encoding Type

8. XHTML Tags  Commenting The purpose of commenting is to provide information for the web page designer. A comment may appear anywhere in an HTML/XHTML document and has the following format:  Example:  <!-- Here is a  multiple line comment -->

9. XHTML Tags  This is the HTML/XHTML document header. (required) The tag defines an HTML/XHTML document header. The header contains information about the document rather than information to be displayed in the document. The web browser displays none of the information in the header, except for text contained by the tag. You should put all header information between the and tags, which should precede the tag. The tag must contain the title tag and optionally - to be covered at a later date - the base, isindex, meta, script, style, and link tags.

10.  The tag is contained in the heading of the web page document. This tag specifies the title of the document. The title will appear in the title bar of the browser window. In addition, automated web search tools can use the title to index documents.

11. XHTML Tags  The tag specifies the main content of a document. You should put all content that is to appear in the web page between the and tags. The tag has attributes that let you specify characteristics for the document such as: The background color An image to use as a tiled background for the window The default text color, active/unvisited/visited link colors Actions to occur when the document finishes loading or is unloaded, and when the window in the document is displayed receives or loses focus.

12. XHTML Tags  Attributes:   Sets the color of the document background.   Displays an image in the document background. (can use relative or absolute pathnames)   Sets the color of normal text in document. Normal text

13. XHTML Tags  Attributes :   Sets the text color of all unvisited links in the document.   Sets the text color of all links when clicked down (activated).   Sets the text color of all visited links in the document. Unvisited Link Active Link Visited Link

14. XHTML Tags  In addition to empty and non-empty tags, there are also categories of tags called Block-Level tags and Inline tags. Block-Level Tags Block-Level tags are used to set up the structure of the web pages (eg. Building blocks). Block-level tags are automatically separated by a separate empty line. Block-level elements may contain in-line elements or other block- level elements We will discuss inline tags in a later class… Heading Paragraph Line Table Web page body Block-Level Tags (Structure)

15. Block-Level Tags .. (non empty tag)  Displays a heading. Level-one (h1) headings are the largest and level-six (h6) are the smallest.  (non-empty tag)  Displays a paragraph. You can use the tag to insert a line break with extra space using the tag.  (non-empty tag)  Displays an indented paragraph. Block quotes are usually used to quote passages from books, etc…

16. Block-Level Tags  (empty tag)  Used to display a line. This is useful to separate other blocks or sections of the web page.  (Non-empty tag)  Used to display text such as code, where characters such as new line are recognized by the browser.  Other Block-Level Tags to be Covered in Course: Lists (,,,,, ) Tables (,,, )

17. Creating a Web page After you have learned how to code your web page, you will need to physically create your web page on a web server (e.g. on your Matrix account) to allow others to view your web page. In order to do this, you will need to know where to create a file that will contain your web page.

18. Creating a Web Page On your Matrix account, there a directory called public_html, that is the “starting place” where web pages or subdirectories containing web pages are stored. Any web pages stored in a directory level higher than the public_html director will not be available to be viewed on the Internet Home directory Public_html

19. Creating a Web Page Home directory public_html Web page files should be text files that end with an extension.html or.htm Web page files should be contained in the public_html directory or a subdirectory of public_html A web page called index.html will automatically load the web page if just the directory pathname is used. If no index.html file is available in the directory, then the contents of the directory will be displayed in the web browser. NOTE: Do not include the public_html directory in the pathname of the web page address (URL)…

20. XHTML Validation You are required to validate your web document for XHTML 1.0 Failure to have your web document validate for XHTML1.0 will result in major assignment penalties (eg. 30%). To validate your web document: Create a web document in your Matrix account. Copy your full or absolute URL (eg. http://matrix.senecac.on.ca/~myacct/mywebpage.html) Go to http://validator.w3.org Under “Validate by URL”, paste in your full URL. If Errors, edit your webpage file in Matrix, save file, and revalidate again! If web document validates, copy code in validator to create a linked image in your web page to automatically validate.