HTML and XHTML

How does a web browser paint a web page?

The Gecko rendering engine of Mozilla

Content marked up as HTML data enters Gecko either from the network or a local source
Gecko parses the HTML data, sending style commands to the CSS parser.
HTML data is modeled as a tree structure - the Document Object Model
CSS rules specify how elements of the DOM should look - font size, image size, etc.
The View Manager negotiates with the native operating system to figure out where on the display area the data will be drawn. It then tells the system which part of the display area needs to be repainted.

Mozilla, an open-source browser Gecko embedding basics

Whatever happened to Netscape?

The open-source browser movement: Mozilla

"Mozilla is world-class open source browser that is designed from the ground up to support open Internet standards across a variety of platforms including Windows, Linux, Mac OS X, OS/2, Solaris and many more. Mozilla provides users with acclaimed browsing convenience along with power features such as pop-up blocking and tabbed browsing. Mozilla also provides a sophisticated platform for developing web and intranet applications using cutting edge technologies such as XML, SOAP and XSLT.

Let's check our acronyms one more time:

HTML - Hypertext Markup Language
XHTML - Extensible Hypertext Markup Language
XML - Extensible Markup Language
CSS - Cascading Style Sheets
DOM - Document Object Model
XSLT - Extensible Stylesheet Language Transformation
SOAP - Simple Object Application Protocol
OS - Operating system
W3C - World Wide Consortium

HTML and XHTML

"HTML and XHTML are document-layout and hyperlink-specification languages. They define the syntax and placement of special, embedded direction that aren't displayed by the browser but tell it how to display the contents of the document, including text, images, and other support media. The languages also tell you how to make a document interactive through special hypertext links, which connect your document with other documents--on either your computer or someone else's --as well as with other Internet resources."
Chuck Musciano & Bill Kennedy HTML and XHTML: The Definitive Guide O'Reilly, 2002

Something to consider:

What is the relationship between information content and presentation?

Question: If I intend to reuse today's information tomorrow, how much of today's presentation do I want to embed into tomorrow's information?

Question: If I intend to share my information with other folks, to what extent should I embed my style tastes in the data? For example, I may love purple text on a gold background (i.e., Bow wow Huskies!), but they like crimson text on a gray background, (i.e., Go Cougs!). I don't mind sending them purple and gold, but I hate it when they send me crimson and gray because I have to do extra work to change the data. Would it be more efficient all around to keep style tastes out of the data?

HTML

HTML is the lingua franca for publishing hypertext on the World Wide Web. It is a non-proprietary format based on SGML, and can be created and processed by a wide range of tools, from simple plain text editors - you type it in from scratch - to sophisticated WYSIWYG authoring tools. What is HTML?

HTML 4.01 Specification W3C Recommendation 24 December 1999

HTML 4 extends HTML with mechanisms for style sheets, scripting, frames, embedding objects, improved support for right to left and mixed direction text, richer tables, and enhancements to forms, offering improved accessibility for people with disabilities.

Getting started with HTML

Basic HTML structure

<html>
<head>
	<title>My first web page</title>
</head>
<body>
Hi everyone, this is my first web page!
</body>
</html>

Various levels of headings

A level one <h1> heading

A level two <h2> heading

A level three <h3> heading

Styling content

Italics with <em> tag
Bold with <strong> tag

Adding images

<img src="bird.jpg" alt="blue bird" width="102" height="68" border="0" align="left">

Links to the other web pages

Dave Raggett's Getting started with HTML

Dave Raggett's <a href="http://www.w3.org/MarkUp/Guide/">Getting started with HTML</a>

Lists

Movies starring Reese Witherspoon:

Legally Blonde
Red, White and Blonde

<ul>
   <li>Legally Blonde</li>
   <li>Red, White and Blonde</li>
</ul>

HTML Tidy

HTML TIDY is a free utility for fixing HTML mistakes automatically and tidying up sloppy editing into nicely laid out markup.

Available at http://infohound.net/tidy/ and http://www.thedumbterminal.co.uk/services/tidy.shtml

XHTML

What is XHTML? Answer: The bridge between HTML and XML

XHTML 1.0 W3C Recommendation 26 January 2000 "The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility."

It extends HTML 4
Designed to work with XML-based user agents and therefore is XML conforming
Allows for the introduction of new markup tags
Allows for "general user agent interoperability," i.e., different kinds of viewing devices such as PCs, handhelds, tablets, etc.

What would your mother say about XHTML?

She would tell you to always write XHTML because you never know when you will have to go back and reuse work that you have already done ("A stitch in time saves nine!"), and you never know when you will share your work ("Many hands make short work"), and because it is forward looking and XML compliant ("The future is now!").

How to make your mother happy and yet avoid a lot of drudgery

Exercise:

1. Mouse up to the toolbar of your browser and pull down view > source of this very web page. I wrote this page using Macromedia HomeSite+ and sort of fumbled around doing several things at once; i.e., struggling with HTML, fidding with CSS, mucking around with JavaScript, articulating some information about HTML, and at the same time using a designer's eye to create a delightful and educational experience! As you can see, the web page is a spectacular example of modern web pedagogy, but the source code is haphazard HTML all messed up, inconsistent, hard to read. In other words, my page is an one-off, work of art. How to please my mother and clean up my HTML tags and make my page into XHTML? Something she could be proud of and I could share with my friends without too much embarrassment?

2. Go to one of the online versions of HTML Tidy and note how it will do all the work for you. You can submit a web page and indicate that you want XHTML in return. Of course, you can also download HTML Tidy (it's free) and have your own copy.

<!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 name="generator"
    content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>INFO 100 HTML</title>
    <style type="text/css">
    /*<![CDATA[*/
 div.c8 {background-color:yellow;padding-top:20px;padding-left:20px;padding-bottom:20px}
 span.c7 {color: #FF0000}
 em.c6 {font-size: 80%}
 strong.c5 {color: #FF0000}
 div.c4 {background-color:cyan; padding-top:20px; padding-left:20px; padding-bottom:20px}
 div.c3 {background-color: yellow; padding-left:20px; padding-top:20px; padding-bottom:20px}
 span.c2 {font-size: 80%}
 div.c1 {text-align: center}
    /*]]>*/
    </style>
  </head>
  <body>
    <table bgcolor="#FFFFFF" cellspacing="2" cellpadding="2" border="0">
      <tr>
        <td width="100">
        </td>
        <td>
          <!-- Top of page -->
          <script type="text/javascript" language="javascript" src="../pageHeading.js">
          </script> 
          <h1>HTML and XHTML</h1>
          <h3>How does a browser paint a web page?</h3>
          <div class="c1">
            <h4>The Gecko rendering engine of Mozilla</h4>
          </div>
          <div class="c1">
            <img src="../../Images/PartTwo/EmbeddingBasics.gif" alt="" border="0" />
          </div>
          <ul>
            <li>Content marked up as HTML data enters Gecko either from the network or a
            local source</li>
            <li>Gecko parses the HTML data, sending style commands to the CSS
            parser.</li>
            <li>HTML data is modeled as a tree structure - the Document Object Model</li>
            <li>CSS rules specify how elements of the DOM should look - font size, image
            size, etc.</li>
            <li>The View Manager negotiates with the native operating system to figure
            out where on the display area the data will be drawn. It then tells the
            system which part of the display area needs to be repainted.</li>
          </ul>
 
 		........ material deleted for brevity

Something to think about:

Have you noticed how HTML (and the web) started out as a way for a bunch of defense department scientists to share their papers back and forth, and in the beginning it seemed to be ok just to use any old presentation markup? Now, have you noticed how the topic seems to have evolved into information "reuse" and the division of content and presentation? Notice how XHTML is a technology for future, unknown applications? Notice how everything seems to have gotten serious and sweaty? Like there are going to be hundreds of people writing content and an army of people designing presentation and then maybe a bunch of database types and nobody is going to do all of it anymore because the whole "information on the Web" thing is getting industrialized? And anyway, it's getting so technical that one person couldn't know all of it anymore. Like, have you noticed that? It used to be sort of a fun thing done by a handful of geeks and now it's transforming us into an "information society" and other heavy trips like that?