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.
- History and Document Validity
HTML
- F01b - (3:31)
- HTML History:
- HTML History - Wikipedia
- For more info:
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.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 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>
- This is incorrect nesting:
- 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
- The HTML5 specification may not be a standard until 2020.
- It is still very much in a state of development with many parts of it representing different technologies.
- W3C HTML5 Working Draft
- HTML5 - Wikipedia
- Examples:
- Apple home page source code.
- YouTube home page source code.
- W3C HTML5 Logo page source code.
- 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:
- 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.
- <!doctype html>
Assignment: Convert HTML to XHTML
- F01i - (2:39)
- Assignment: making code compliant with XHTML 1.0 Transitional.
- Create a new html file without adding anything to it, no code, nothing, just an empty text file.
- Name it yourlastname_F01.html
- View the code on this page.
- Copy that code.
- Paste the copied code into your new file. Only the code you copied and pasted should be in your file.
- Then make the document compliant with XHTML 1.0 Transitional.
- Note that there is no need for you to send me the image file. I will just be checking the code.
- Assignment: making code compliant with XHTML 1.0 Transitional.