Transcript CHAPTER 1
Creating HTML 5 Documents (The Basics) Goals (XHTML HTML5) XHTML HTML 5 Separate document structure and content from document formatting 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 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 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 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 Hooking Up the DTD The <!DOCTYPE> 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 <!DOCTYPE> declaration to keep everything happy <!DOCTYPE> 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 <!DOCTYPE> (Example 1) Sample XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > 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 HTML5 Document DTD The DTD has been reduced down to And does not physically exist 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 Document Validation There is a validator at http://validator.w3.org It validates the following document types Check your documents before turning them in Document Validation Select the file, encoding and document type Document Validation And see the results Principles of HTML5 Don’t break the Web Pave the Cowpaths Everything “before” HTML5 is valid Adds standards for many things (multimedia) where there were no standards before Be practical Changes should have a payoff 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 <header>, <footer>, <nav>, <article>, and <section> that have meaning beyond just formatting These semantics help with assistive technologies too Elements (Syntax) Elements have starting tags and ending tags Starting tags appear in <> characters as in <p> Ending tags appears in </> characters as in </p> When there is no data a shorthand notation can be used as in (line break) <br /> 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 <article> 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 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) 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 HTML5 Attribute (Example) Example: an attribute named id with a value of FirstHeader in the <h1> element The element has no content <h1 id="FirstHeader"></h1> The following element has content <h1 id="FirstHeader">Header Content</h1> Structural Elements <html> must be the root element <head> must appear next nested inside <html> <body> must appear next nested inside <html> and follow <body> These elements are optional in HTML5 but required in XHTML The <head> Element (1) It’s the document header and contains information about the Web page The <head> Element (2) Child elements <base>- the base URL for relative references <link> - contains a link to an external Cascading Style Sheet or other resource <meta> - describes document metadata used by search engines among other things The <head> Element (3) <script> - contains scripting language commands <style> - defines style information More later when we talk about JavaScript More about this when we talk about CSS <title> - contains the text that appears in the title bar of the browser The Document Body The <body> appears after the <head> It contains the document content that is rendered by a browser Basic Body Elements (1) <h1> <h2> … <h6> are heading tags Text appears between the tag <h1>This is a heading</h1> <p> inserts a paragraph <br /> inserts a line break <hr /> inserts a horizontal line (rule) The Anchor <a> Element (Introduction) The Anchor <a> element is used to create links to Another Web site Pages within the current Web site A position on a Web site page The Anchor <a> 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 The Anchor <a> 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 http://www.iana.org/assignments/mediatypes/media-types.xhtml The Anchor <a> Element (Link Example) A link to UNR The user sees the text UNR Note that the visible link appears as the element content (UNR) <a href=“http://www.unr.edu/”>UNR</a> Bookmarks (Introduction) <a> 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 Bookmarks (Creating the Anchor) Create the anchor by setting the id attribute of any tag: <h1 id="top">IS 360</h1> Bookmarks (Referencing the Anchor) Reference the anchor using the <a> tag href contains the bookmark’s id preceded by the # symbol Example: <a href="#top">Top</a> Bookmarks (Best Practices) Use both name and id to support obsolete browsers The <img> 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) The <img> 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) The <img> 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 The <img> Element (Examples) Insert an image using a relative reference The current directory <img src="NevadaRGB.gif" alt="Nevada N"/> Making an Image into a Link Simply embed the <img> tag into the content of the <a> tag as in <a href="http://www.unr.edu"> <img src="NevadaRGB.gif" alt="Nevada N" height="100px", width="200px" /> </a> The Purpose of a URL We use Uniform Resource Locators to Send requests to Web servers Send information about the request The Format of a URL http://moneycentral.msn.com/detail /stock_quote?Symbol=msft Protocol http:// Domain moneycentral.msn.com Directory detail/stock_quote Query string ?Symbol=msft 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 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 File Names (Best Practices) Beware that some Web servers are casesensitive 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 Comments Comments appear between the <!-and --> characters Comments can appear on multiple lines Comments cannot be nested The end of comment pattern cannot appear within a comment Introduction to Lists (1) Lists are of three types Ordered (numbered) lists are marked with the <ol> tag Unordered (bulleted) lists are marked with the <ul> tag List items <li> appear inside the above tags The type attribute controls the symbol displayed This attribute is valid only for XHTML Transitional Lists can be nested Ordered List (Example) <ol> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ol> Unordered List (Example) <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> Definition Lists (Introduction) The <dl> element marks a definition list Again, these are newer semantic tags The inner <dt> and <dd> element pairs mark the term and its value Definition Lists (Example) <dl> <dt>Term</dt> <dd>Definition of Term</dd> <dt>Second Term</dt> <dd>Definition of Second Term</dd> </dl> Entity References We often need to Insert special meta-characters < > into XHTML documents Named entities Insert symbols © Numbered Entities Inserting Special Characters (Named Entities) a complete list appears at http://w3schools.com/tags/ref_entities.asp ¢ £ © ® < > & " non-breaking space cent symbol British Pound copyright symbol registered trademark less than greater than ampersand double-quotation mark 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) Finding Symbols PowerPoint’s Insert Symbol dialog box is a good tool Named Entities (Example) The following <br> is rendered as <br> 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 Whitespace (Example) Whitespace is normalized when an THML document is rendered: The following will be rendered the same: <p>foo</p> <p> foo </p> Whitespace (Example) The following text <p>This text will appear on one line </p> Will be rendered as (whitespace is normalized): This text will appear on one line