ITEC 325 2013spring ibarland

home—lects—exams—hws
D2L—breeze (snow day)

lect05c-xhtml-and-html
xhtml, and html

• Review: write a loop that sums array(31,29,31,30)
• HTML review:
  HTML is a (text representation of) a tree. The tree [as it exists in memory of the browser's program] is also the called the Document Object Model, or "DOM".
• Each tag has three parts:
  tag-name
  attributes (name/value pairs)
  children
  
• A more precise (but not-quite-complete) definition: An HTML-node is EITHER:
  • a tag,
  • an entity
  • a string (well, a pc-string)
  WHERE:
  • a tag is: a tag-name (a lower-case word), and 0 or more attributes (an name/value pair), and a body (which is a list-of-HTML-nodes):
    <name attrName="attrValue"…>body</name>
  • an entity is &someWord; where someWord is just a pc-string without whitespace.
    
  • A pc-string (parsed character string) is any string without¹the five characters    <    >    &    "    '
• There are three attributes with special meaning in HTML:
  

  • id — specify a unique node. The same value can't be used for the id attribute of two different tags. (And, it's wise to not even have two different ids which differ only in case.)

    The id is commonly used for:

    • placing anchors, e.g. “if you look at <a href="somePage.html#para4">this exact paragraph</a>, ...”, and
    • (in javascript) to extract a desired DOM tree-node (“var myNode = getElementById("para4");”).

  • name - specify a set of nodes. All the related nodes can use the same value for their name attribute, to indicate their relation.

    The name is commonly used for:

    • Grouping radio-buttons, in HTML.
    • An alternate (less-preferred than id) way of placing anchors.
    • (in javascript) to extract an entire set of desired DOM tree-nodes (“var myNode = getElementsByName("tribe");”).

  • class — used by css. Don't be too specific here; try to use a class that corresponds to some semantics: e.g. “menuItem”, not “boldItalic”.

• There are also entities. &mdash;, &hellip;. An entity represents an atomic² piece of information: often a single glyph/fancy-charcater, but in theory you could use an entity for a logo or a motto.

  There are five entities that are common to any xml (not just html/xhtml):

  • &amp; (&)
  • &lt; (<)
  • &gt; (>)
  • &apos; (')
  • &quot; (")

• xhtml : Even though original HTML doesn't require the following, they are best practices, and they are required for this class:
  • Tag names are case-sensitive (with a preference for lower-case and camelCase).
  • quote all attribute-values, even if it looks numeric;
  • well-formed (duh): each open-tag must be eventually followed by a corresponding close-tag, and if a tag's body contains another open-tag it must also contain the corresponding close-tag.
    • Bad: This is <em>not <strong>at all</em> legal</strong> XML.
    • Good:This is <em>actually <strong>very</strong> good</em> practice.
    Another way of viewing this: The open/close tags must correspond to a tree.

    The most common (non-X)HTML example using improperly nested tags is <p>, which (in HTML) doesn't need to be closed; the browser auto-closes the tag when it reaches the next <p> (or more precisely: when it reaches the next block-level open-tag, or a close-tag which is terminating the enclosing block, e.g. if the paragraph was already inside an itemized list).

    Browsers tend to go to great lengths to try to make sense of tag soup; just because a page looks fine in your browser doesn't mean it's legal. The result is that many people learned their HTML by doing a show-source on bad, illegal examples, and then propagating that bad HTML, and never realizing it because most browsers still did something reasonable (although the details of how a browser handled bad HTML are of course entirely non-standard).

  • Self-closing tags:
    • <br></br>— fine, but long-winded.
    • <br/>— self-closing tag, allowed by XML.
    • <br />— Best practice³: used for backwards compatability. The original HTML required a space before the /, and it's conceivable (if unlikely) that a modern browser will insist on using the HTML standard
    • <br> </br>— (note the space inside the tag) this version is not equivalent (and, not valid HTML) — spaces are part of your XML text, even if an HTML browser chooses often ignore them for layout purposes.

    Important: In HTML (and enforced by most modern browsers), you can only use the self-closing tag, for those tags which never are allowed a body. For tags that may or may not have a body (e.g. script), you cannot use the self-closing version even when you want an empty body. There is no good reason for this!

    • <hr />— fine; hr never has a body.
    • <img src="foo.jpg" />— fine; img never has a body.
    • <script type="text/javascript" src="foo.jpg"></script>— fine.
    • <script type="text/javascript" >callSomeFunction();</script>— fine.
    • <script type="text/javascript" src="foo.jpg" />— BAD; a browser may ignore the tag entirely!, which is an annoyingly difficult bug to track down.

• 2 common “dummy” tags: span, div. These are used when you want to group several in-line elements (or, block-elements resp.) They don't have any native meaning to HTML — they are solely for allowing the author to group things together than don't otherwise have a tag, and perhaps attach a style to them.

  For example, you might want to give a “name” attribute to every mention of an indian-tribe in your document. But the tribe-names are just regular text, so there isn't a natural a or cite or tag to use. Instead we can put them in a span tag:

         The <span name="clan">Catawba tribe</span> and
         the <span name="clan">Powhatan Confederacy</span> each
         roamed the part of the earth now known as “Virginia”.

  This has no effect on mark-up. span and div are commonly used to apply a class attribute to a section of a page (and class attributes are in turn often used to implement a 'virtual tag' invented by the author specific to that document)… See also the XSLT processing, for a more heavyweight approach to doing this.

• Q: Btw, what's the difference between the meaning of HTML's em and (the deprecated) i tag? How are either of these different from cite?
• Okay, we prefer cite and em over i. But what about something like italicizing foreign words — “The senator was the victim of an ad hominem attack.”. Unlike cite, there isn't a tag foreign definted in HTML. So what to do? Just use i and give up all information?

home—lects—exams—hws
D2L—breeze (snow day)

©2012, Ian Barland, Radford University Last modified 2013.Mar.04 (Mon)

Please mail any suggestions (incl. typos, broken links) to ibarlandradford.edu