Basic HTML Document Structure

Slide 2 Goals (XHTML HTML5) XHTML Separate document structure and content from document formatting HTML 5 Create a formal (strict) version of HTML Extend the language to include semantic elements and standard media elements to play video, audio, … Adds what’s missing instead of fixing what’s wrong I’ll focus on HTML 5

Slide 3 What’s the Status of HTML5 It’s pretty much supported by IE 9+, and current versions of Chrome At this point, it’s a living language and other software is growing to support it There is a cohesive API that goes along with the language Much more about programming later We will be working in HTML5 this semester but I’ll talk about both here

Slide 4 HTML and XML Roughly speaking, HTML is a specific XML vocabulary Document Type Definitions (DTDs) are used to create XML vocabularies There are many vocabularies in addition to HTML SOAP, XSLT, XPATH, and many more Although not mentioned in the book, schemas are used for document validation

Slide 5 DTDs (Introduction) Document Type Definition (DTD) files are used to validate XML documents That is, they describe the elements allowed in an XML document, and the order in which those elements must appear Older versions of HTML and XHTML used physical DTDs. HTML5 does not

Slide 6 Hooking Up the DTD The declaration is used to reference an “external” DTD There are DTDs to validate XHTML There is no physical DTD for HTML5 but we use the declaration to keep everything happy

Slide 7 HTML5 Document DTD The DTD has been reduced down to And does not physically exist

Slide 8 HTML5 Validation Visual Studio.NET automatically validates HTML 5 (and other versions) documents as you edit them Note that most browsers WILL render invalid HTML5 documents I WILL NOT accept them without penalty though

Slide 9 Document Validation There is a validator at It validates the following document types Check your documents before turning them in

Slide 10 Document Validation Select the file, encoding and document type

Slide 11 Document Validation And see the results

Slide 12 Principles of HTML5 Don’t break the Web Everything “before” HTML5 is valid Pave the Cowpaths Adds standards for many things (multimedia) where there were no standards before Be practical Changes should have a payoff

Slide 13 HTML 5 Semantics We have all heard of the semantic Web HTML 5 introduces semantic language elements Formatting elements are now semantic elements We introduce elements like,,,, and that have meaning beyond just formatting These semantics help with assistive technologies too

Slide 14 Elements (Syntax) Elements have starting tags and ending tags Starting tags appear in <> characters as in Ending tags appears in characters as in So a paragraph becomes: I am a paragraph. When there is no data, a shorthand notation can be used as in (line break)

Slide 15 XHTML Elements and Attributes Elements are roughly categorized into two types Block-level elements define the structure of a page Paragraphs, tables, etc… Semantic elements such as Inline elements are used mostly for formatting Inline elements appear inside of a block-level element Semantic elements are favored over older formatting elements We will talk about different elements as we use them

Slide 16 Document Attributes Attributes are used to further configure an element Some attribute names are common to almost all elements ID is usually a unique identifier Some attribute names are unique to a specific element href applies only to anchor elements (hyperlinks)

Slide 17 Document Attribute (Syntax) Attributes appear in an opening element tag They appear as key/value pairs An equal sign separates keys and values A space separates multiple key/value pairs Values are quoted Both single and double quotation marks are allowed

Slide 18 HTML5 Attribute (Example) Example: an attribute named id with a value of FirstHeader in the element The element has no content The following element has content Header Content

Slide 19 Structural Elements must be the root element must appear next nested inside must appear next nested inside and follow These elements are optional in HTML5 but required in XHTML

Slide 20 The Element (1) It’s the document header and contains information about the Web page

Slide 21 The Element (2) Child elements (more detail about these later) - the base URL for relative references - contains a link to an external Cascading Style Sheet or other resource - describes document metadata used by search engines among other things

Slide 22 The Element (3) - contains scripting language commands More later when we talk about JavaScript - defines style information More about this when we talk about CSS - contains the text that appears in the title bar of the browser Include a short title as it is used by search engines

Slide 23 The Document Body The appears after the It contains the document content that is rendered by a browser

Slide 24 Basic Body Elements (1) … are heading tags Text appears between the tag This is a heading inserts a paragraph inserts a line break inserts a horizontal line (rule)

Slide 25 The Purpose of a URL We use Uniform Resource Locators to Send requests to Web servers Send information about the request

Slide 26 The Format of a URL /stock_quote?Symbol=msft Protocol Domain moneycentral.msn.com Directory detail/stock_quote Query string ?Symbol=msft

Slide 27 Absolute and Relative References Links may be created in two ways Absolute links contain the protocol, domain, and directory Relative links are created “relative” to the current pages Special character patterns allow you to navigate the directory herarchy

Slide 28 Relative References (Examples) Foo.htm The file named foo.htm in the current folder Child/foo.htm The file named foo.htm in the folder named Child../foo.htm The file named foo.htm in the parent folder

Slide 29 File Names (Best Practices) Beware that some Web servers are case- sensitive when it comes to file names Use a constant scheme for creating files (Pascal case or Camel case) Spaces are problematic for file names %20 anyone

Slide 30 Comments Comments appear between the characters Comments can appear on multiple lines Comments cannot be nested The end of comment pattern cannot appear within a comment

Slide 31 Page Layout There are some design rules / suggestions for Web pages Some look like this:

Slide 32 Page Layout It represents the header for the page or article It Use the role attribute to improve accessibility Ski Area List</h1

Slide 33 Page Layout The tag is used to depict a navigation section containing some kind of menu Again, the role attribute depict the section’s purpose Ski Area List

Slide 34 Page Layout The element marks the main content of the document A page can have at most one element It should not contain content repeated across documents (menus, headers, footers, etc.) IE does not support this element It cannot be a descendant of,,, or

Slide 35 Page Layout Use the element to represent a complete or self-contained thought And often appears as a descendant of the element Articles can be nested An has one or more sections element

Slide 36 Page Layout An contains tangential content of an or section A marks a footer for an article, aside, body, details, fieldset, figure, nav, or section.

Slide 37 Generic Containers The tag is a block-level element Use it to mark content without semantic meaning It’s just a placeholder for content

Slide 38 Naming Elements Use the id attribute to uniquely identify an element This of this attribute as a variable name It will become important later when we Work with Cascading Style Sheets (CSS) Work with JavaScript and other programs