DOCTYPE

First, A Bit of Markup Language History

SGML

F01a - (2:38)

Granddaddy of mark up languages
Tags and attributes
SGML
- History and Document Validity
  - A Document Type Definition (dtd) must be specified
- Derivatives include HTML, XML, XHTML which need to abide by the rules required for SGML documents.

HTML

F01b - (3:31)

HTML History:
- HTML History - Wikipedia
- For more info:
  - More HTML History

XML

F01c - (1:53)

XML
Define your own tags.
Strict syntax
Declaration:
- <?xml version="1.0" encoding="UTF-8" ?>
Example xml code:

<EnrolledStudents>
     <Student ID="1">
         <PreferredName>Billy-Bob</PreferredName>
         <Email>whonose.gmail</Email>
         <Address1>228 Riverside Drive</Address1>
         <City>Bethpage</City>
         <State>NY</State>
         <Zip>11852</Zip>     
     </Student>     
     <Student ID="2">         
         <PreferredName>Mickey</PreferredName>
         <Email>mickeytricky@ucla.edu</Email>
         <Address1>579 Westholme</Address1>
         <Address2>Penthouse</Address2>
         <City>Los Angeles</City>
         <State>CA</State>
         <Zip>92704</Zip>
     </Student>
 </EnrolledStudents>

DOCTYPE Introduction

The Importance of a DOCTYPE

F01d - (5:22)

Document Type Declaration - Wikipedia
Note that DOCTYPE is not a tag but instructions to the browser about what type of document follows.
- A legitimate doctype is required to prevent browsers from going into quirks mode can have prevent css from working properly.
It is critical to CSS working properly that a standard DOCTYPE is specified.
W3C DOCTYPE recommendations
- Further reading: An explanation of the parts of a doctype statement.
ISO 639-2 Language code letters - A list provided by The Library of Congress
DOCTYPE info from Microsoft

Common Doctype's

Comparison of the basic code for three doctype's

F01e - (2:44)
- The three basic types of documents shown together.
- Compare the simplicity of html5 with the others.

HTML 4.01 Transitional

F01f - (2:57)
- Basic document
- Example: Amazon home page source code.
- HTML4 Transitional
  - Lenient
  - http://www.w3.org/TR/html4/sgml/loosedtd.html
  - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Transitional

F01g - (8:44)
- Basic document
- Example: Dodgers home page source code.
- The differences between XHTML and HTML - check all items on this page, not just the section being linked to: http://www.w3.org/TR/xhtml1/#diffs
- XHTML
  - HTML and XHTML use the same elements generally.
  - Compared with html, xhtml is almost the same but it has more stringent rules so that it is compliant with xml.
  - XHTML 1.0 Transitional DTD
    - There is also a strict dtd which does not allow backwards compatibility.
  - Document declaration and the <html> tag for xhtml transitional, which is backwards compatible with html:
    - <!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">
    - The html tag attribute xmlns provides information on what is called the namespace. Namespaces are intended to disambiguate (make unambiguous) terms that it shares with other namespaces.
  - Differences between XHTML and HTML:
    - SGML-based versus XML-based HTML
    - All tags must have closing tags. Tags that do not have closing tags must be self-closing. This means they must have a forward slash ( / ) before the closing angle bracket. for example:
      - <br> becomes <br />
      - <hr> becomes <hr />
      - <img src="image.gif"> becomes <img src="image.gif" />
      - Other tags that need to be self-closing include: input, area, link, meta
    - Tags and attributes must be lower case
    - Attribute values must be in quotes.
    - Elements must be properly nested. I doubt you have been doing this, but it does occur:
      - This is incorrect nesting:
        <p><em>This is the meaning of life.</p></em>
      - Following is, of course, proper nesting:
        <p><em>This is the meaning of life.</em></p>
    - All attributes must have values, including those that don't have values in html. There are very few. One is the nowrap attribute which can be used in the <td> tag to prevent the contents from wrapping to the next line.
      - In HTML the nowrap attribute has no attribute value, it is simply used this way: <td nowrap>.
      - However, in xhtml it is written <td nowrap="nowrap">

HTML5

F01h - (6:51)
- Basic document
- W3C HTML5 Overview
  - We will use html5 for the rest of this course.
  - HTML5 - W3C - Syntax
- New tags such as the following will replace some of the situations where div tags are used for identifying parts of pages for greater control over appearance using CSS. These new tags fall into the realm of semantic mark-up - meaning, they identify types of information but not appearance, which is best left to css:
  - <nav> (for navigation bars)
  - <article>
  - <header>
  - <footer>
  - ...and several other new tags and attributes that will be a refreshing change from html which has remained essentially the same for many years.
  - Examples of the following html5 tags in use:
    - header
    - footer
    - nav
    - aside
    - section
  - Note that the <embed> tag is not supported by XHTML and yet it's supported by all browsers, and is a part of the html5 specification.
  - Information about the semantic web. which is very exciting development that would ultimately allow all web pages to be far more searchable by machines in order to collect and assemble data. Proper coding is an important part of that development.
- Potential to replace Flash:
  - HTML5 is being given nods of approval from Google, Facebook, and Microsoft each of whom support slightly varying versions of it.
  - It will probably become the predominant means for delivering video and interactive content by around 2016, replacing Flash as the primary way to deliver such content.
  - Apple's lack of support for Flash in iPad and iPhone:
    - Apples perspective
    - Adobe accommodates Apple
- Not XML compliant.
  - Compared with XHTML it is much more forgiving, as was the case with HTML4 Transitional.
  - Optional:
    - Quotes for attribute values
    - Self-closing tags
    - Upper, lower, or both cases can be used for the text used in tag and attribute names.
- No DTD required - not an SGML language and therefore not compliant.
- Simple declaration and recommended head tags for html5:
  - <!doctype html>
    <html lang=en>
    <head>
    <meta charset=utf-8>
    <title> ...etc.

Assignment: Convert HTML to XHTML

F01i - (2:39)
- Assignment: making code compliant with XHTML 1.0 Transitional.
  1. Create a new html file without adding anything to it, no code, nothing, just an empty text file.
  2. Name it yourlastname_F01.html
  3. View the code on this page.
  4. Copy that code.
  5. Paste the copied code into your new file. Only the code you copied and pasted should be in your file.
  6. Then make the document compliant with XHTML 1.0 Transitional.
  7. Note that there is no need for you to send me the image file. I will just be checking the code.