Slide 1

Creating HTML 5 Documents (The Basics)

Slide 2

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 whats missing instead of fixing whats wrong Ill mention both

Slide 3

Slide 3 Whats the Status of HTML5 Its pretty much supported by IE 9+, and current versions of Chrome At this point, its 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 Ill talk about both here

Slide 4

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

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

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

Slide 7 Declaration (Syntax XHTML)

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

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

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

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

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

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

Slide 23 The Element (1) Its the document header and contains information about the Web page

Slide 24

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

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

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

Slide 27

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

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

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

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 http://www.iana.org/assignments/media- types/media-types.xhtml http://www.iana.org/assignments/media- types/media-types.xhtml

Slide 31

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

Slide 32 Bookmarks (Introduction) tags are used to create links to a location within a (the same) document Its a two-step process Create an element using the name or id attribute id is understood by newer browsers name is deprecated

Slide 33

Slide 33 Bookmarks (Creating the Anchor) Create the anchor by setting the id attribute of any tag: IS 360

Slide 34

Slide 34 Bookmarks (Referencing the Anchor) Reference the anchor using the tag href contains the bookmarks id preceded by the # symbol Example: Top

Slide 35

Slide 35 Bookmarks (Best Practices) Use both name and id to support obsolete browsers

Slide 36

Slide 36 The Element (Introduction) Its 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

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

Slide 38 The Element (Notes) If you dont 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 wont use the deprecated formatting attributes favoring CSS

Slide 39

Slide 39 The Element (Examples) Insert an image using a relative reference The current directory

Slide 40 ">

Slide 40 Making an Image into a Link Simply embed the tag into the content of the tag as in

Slide 41

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

Slide 42 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

Slide 43

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

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

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

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

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

Slide 48 Ordered List (Example) First Second Third Fourth

Slide 49

Slide 49 Unordered List (Example) First Second Third Fourth

Slide 50

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

Slide 51 Definition Lists (Example) Term Definition of Term Second Term Definition of Second Term

Slide 52

Slide 52 Entity References We often need to Insert special meta-characters into XHTML documents Named entities Insert symbols Numbered Entities

Slide 53

Slide 53 Inserting Special Characters (Named Entities) a complete list appears at http://w3schools.com/tags/ref_entities.asp 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

Slide 54

Slide 54 Inserting Unicode Symbols Its 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

Slide 55 Finding Symbols PowerPoints Insert Symbol dialog box is a good tool

Slide 56

Slide 56 Named Entities (Example) The following
is rendered as

Slide 57

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

Slide 58 Whitespace (Example) Whitespace is normalized when an THML document is rendered: The following will be rendered the same: foo foo

Slide 59

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