Creating HTML 5 Documents (The Basics)
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 mention both
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 XHTML and XML Simply put, XHTML is a specific XML vocabulary Document Type Definitions (DTDs) are used to create XML vocabularies There are many vocabularies in addition to XHTML 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 Declaration (Syntax XHTML) <!DOCTYPE html type “public identifier” “URL” html denotes that the root node of the document to follow is HTML type can be PUBLIC or SYSTEM PUBLIC DTDs are available on the Web PUBLIC identifier is magical URL contains the location of the DTD.NET fills all of this in for you
Slide 8 (Example 1) Sample XHTML
Slide 9 XHTML (Types / Versions) Transitional – for browsers that don’t support CSS Old style elements are supported along with CSS Strict - for browsers that do support CSS Deprecated elements are not supported Most of these are formatting related Frameset – for frames 1.1 It’s really modularized strict
Slide 10 HTML5 Document DTD The DTD has been reduced down to And does not physically exist
Slide 11 XHTML and HTML5 Validation Visual Studio.NET automatically validates XHTML and HTML5 documents as you edit them Note that most browsers WILL render invalid XHTML and HTML5 documents I WILL NOT accept them though
Slide 12 Document Validation There is a validator at It validates the following document types Check your documents before turning them in
Slide 13 Document Validation Select the file, encoding and document type
Slide 14 Document Validation And see the results
Slide 15 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 16 HTML5 Semantics We have all heard of the semantic Web HTML5 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 17 Elements (Syntax) Elements have starting tags and ending tags Starting tags appear in <> characters as in Ending tags appears in characters as in When there is no data a shorthand notation can be used as in (line break)
Slide 18 XHTML Elements and Attributes Elements are roughly categorized into two types Block-level elements define the structure of a page Paragraphs and tables 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 19 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 20 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 21 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 22 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 23 The Element (1) It’s the document header and contains information about the Web page
Slide 24 The Element (2) Child elements - 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 25 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
Slide 26 The Document Body The appears after the It contains the document content that is rendered by a browser
Slide 27 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 28 The Anchor Element (Introduction) The Anchor element is used to create links to Another Web site Pages within the current Web site A position on a Web site page
Slide 29 The Anchor Element (Syntax) The href attribute contains the target URL It can contain an absolute or relative reference (more in a minute) The id attribute is used to create a bookmark in a document Also referred to as a named anchor Changed in HTML5 to id from name
Slide 30 The Anchor Element (Syntax) The markup in the element contains the ‘user visible link’ The rel attribute describes the semantic relationship of the link Replaces the rev attribute The new download attribute contains a file name to be downloaded The new type argument contains the MIME type of the linked document types/media-types.xhtml types/media-types.xhtml
Slide 31 The Anchor Element (Link Example) A link to UNR The user sees the text UNR Note that the visible link appears as the element content (UNR) UNR
Slide 32 Bookmarks (Introduction) tags are used to create links to a location within a (the same) document It’s a two-step process Create an element using the name or id attribute id is understood by newer browsers name is deprecated
Slide 33 Bookmarks (Creating the Anchor) Create the anchor by setting the id attribute of any tag: IS 360
Slide 34 Bookmarks (Referencing the Anchor) Reference the anchor using the tag href contains the bookmark’s id preceded by the # symbol Example: Top
Slide 35 Bookmarks (Best Practices) Use both name and id to support obsolete browsers
Slide 36 The Element (Introduction) It’s used to Pull images into HTML documents when the documents are rendered Images are stored separate from the HTML file referencing the image When using thumbnails, you are really using two images Alternate text can appear if the image is unavailable (accessibility)
Slide 37 The Element (Attributes) src - the absolute or relative URL containing the image alt – Text to display in place of the image file (Use to improve accessibility) width – width of the image (in pixels) height – height of the image (in pixels)
Slide 38 The Element (Notes) If you don’t set the height and width, the image will be rendered at its original size If you set the height and width, the image will be scaled as needed The image might be stretched I won’t use the deprecated formatting attributes favoring CSS
Slide 39 The Element (Examples) Insert an image using a relative reference The current directory
Slide 40 Making an Image into a Link Simply embed the tag into the content of the tag as in <img src="NevadaRGB.gif" alt="Nevada N" height="100px", width="200px" />
Slide 41 The Purpose of a URL We use Uniform Resource Locators to Send requests to Web servers Send information about the request
Slide 42 The Format of a URL /stock_quote?Symbol=msft Protocol Domain moneycentral.msn.com Directory detail/stock_quote Query string ?Symbol=msft
Slide 43 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 44 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 45 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 46 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 47 Introduction to Lists (1) Lists are of three types Ordered (numbered) lists are marked with the tag Unordered (bulleted) lists are marked with the tag List items appear inside the above tags The type attribute controls the symbol displayed This attribute is valid only for XHTML Transitional Lists can be nested
Slide 48 Ordered List (Example) First Second Third Fourth
Slide 49 Unordered List (Example) First Second Third Fourth
Slide 50 Definition Lists (Introduction) The element marks a definition list Again, these are newer semantic tags The inner and element pairs mark the term and its value
Slide 51 Definition Lists (Example) Term Definition of Term Second Term Definition of Second Term
Slide 52 Entity References We often need to Insert special meta-characters into XHTML documents Named entities Insert symbols © Numbered Entities
Slide 53 Inserting Special Characters (Named Entities) a complete list appears at non-breaking space ¢ cent symbol £ British Pound © copyright symbol ® registered trademark < less than > greater than & ampersand " double-quotation mark
Slide 54 Inserting Unicode Symbols It’s possible to specify a UNICODE code point as a decimal or hexadecimal number (where d is a decimal or hexadecimal value ) Examples: &#dddd; (decimal) � (hex)
Slide 55 Finding Symbols PowerPoint’s Insert Symbol dialog box is a good tool
Slide 56 Named Entities (Example) The following <br> is rendered as
Slide 57 Whitespace Whitespace refers the spaces, tabs, and carriage returns are all whitespace characters Whitespace is normalized in HTML5 Carriage return characters are rendered as a single space
Slide 58 Whitespace (Example) Whitespace is normalized when an THML document is rendered: The following will be rendered the same: foo foo
Slide 59 Whitespace (Example) The following text This text will appear on one line Will be rendered as (whitespace is normalized): This text will appear on one line