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