©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure

©SoftMoore ConsultingSlide 2 The HyperText Markup Language For creation of Web pages Mixture of –regular text for content –“markup” tags to describe content, appearance, and layout World Wide Web Consortium (W3C) Standards –HTML 3.2 –HTML 4.0 and 4.01 –XHTML –HTML 5 Varying browser support

©SoftMoore ConsultingSlide 3 HTML Example Hello Hello, world. Structure: Doctype (optional) HTML – Head – Body

©SoftMoore ConsultingSlide 4 Document Type Optionally described in first line of HTML document Helps browsers and other agents make useful inferences about the type of elements included in the document. Three Basic Types for HTML 4.0 and 4.01 –“HTML 4.01 Strict” for Style Sheets –“HTML 4.01 Transitional” for deprecated elements and attributes –“HTML 4.01 Frameset” used for frames and transitional elements and attributes. Can use XHTML with all three types HTML 5 supercedes XHTML

XHTML A reformulation of HTML as an application of XML Essential difference: XHTML must be well-formed XML, while HTML need not be. Example of differences –XHTML is case sensitive (element names are lower case) –XHTML documents must begin with XML declaration –No unclosed tags (but empty tags are allowed) e.g., or –Attribute values must be enclosed in quotes –No overlapping element tags (forces hierarchical tree structure) ©SoftMoore ConsultingSlide 5

©SoftMoore ConsultingSlide 6 Content The data contained within the document Formatted by the browser based on tags and user settings Usually not sensitive to extra whitespace Hello, world. Hello, world.

Markup Tags Identify markup elements Enclosed in angle brackets: Not case sensitive: or Recommendation: XHTML requires lowercase. Use lowercase for compatibility with XHTML. Commonly paired: … ©SoftMoore ConsultingSlide 7 Hello, world tags content formatted by the tags

©SoftMoore ConsultingSlide 8 Using Element Tags Many element tags come in pairs... The end tag is often optional This is a paragraph This is another paragraph Recommendation: For compatibility with XHTML, always supply the end tag even when it is optional. Some elements have no end tag. Two forms: (explicit empty tag – required for XHTML)

©SoftMoore ConsultingSlide 9 Nesting Elements Elements are often nested within other elements An HTML document should not contain overlapping element tags. Italicized heading proper Italicized heading improper Most browsers are forgiving of overlapping tags, but in general they should be avoided.

Attributes Supply additional information for tags Format attribute="value" Quotes optional in HTML but required in XHTML Example Hello, world. Can use CSS style sheets to separate content from presentation (more on this later). ©SoftMoore ConsultingSlide 10 attribute value

©SoftMoore ConsultingSlide 11 Comments Enclosed by special markup elements Can extend over multiple lines Space required after initial “ ” Not rendered by the user’s browser Can be used to “hide” JavaScript blocks from older browsers

©SoftMoore ConsultingSlide 12 HTML Template Document Title

©SoftMoore ConsultingSlide 13 HTML Validation Sites

©SoftMoore ConsultingSlide 14 Character Entities Used to represent special characters Two forms –numeric: © –mnemonic: © Examples –< –& &– " " –© ©– ® ® – nonbreaking space

©SoftMoore ConsultingSlide 15 Document Head HTML element: head Provides high-level information about the document to browsers and agents Common elements within the head include –title : typically displayed at the top of the browser –script : include a script (e.g., JavaScript) –style : create an internal style sheet –meta : define meta information (e.g., keywords) –link : relationship between documents (e.g., stylesheet) –base : starting location for relative URL’s –object : include an object

©SoftMoore ConsultingSlide 16 Title HTML Element: title Required head element Document Title Only one per document Should succinctly describe the document’s content Should generally be less than 65 characters Should not contain other HTML tags Can contain entity references (e.g., “ © ” for ©) Default for bookmarks/favorites

©SoftMoore ConsultingSlide 17 Document Base HTML Element: base Specifies starting location for relative URLs No end tag Default location is directory of current document

©SoftMoore ConsultingSlide 18 Meta Elements HTML Element: meta Multipurpose tag providing information through a name- content attribute pair Commonly used for –description –keywords –refreshing/forwarding

©SoftMoore ConsultingSlide 19 Examples of meta Elements <meta name="keywords" content="Java, UML, XML, J2EE object-oriented, object, consulting"> <meta name="refresh" content="5; url=

©SoftMoore ConsultingSlide 20 Background Sound HTML Element: bgsound Nonstandard element for playing sound files Supported by Internet Explorer Loop attribute specifies num of times the sound file will be played –default is 1 –value of "-1" or "infinite" means to play continuously

©SoftMoore ConsultingSlide 21 Document Body HTML Element: body Contains the basic text of the document Common attributes include –background color ( bgcolor ; can use color name or hexadecimal RGB value for color) –font color for text ( text, link, vlink, alink ) –background image: ( background ) Example

©SoftMoore ConsultingSlide 22 Color Can be expressed as a 6-digit hexadecimal number representing the red, green, and blue (RGB) components of the color. #F0F800 Sixteen standard color names –black– blue –red– … Many more extended color names –blue2– beige –darkblue– …

©SoftMoore ConsultingSlide 23 Standard Colors

©SoftMoore ConsultingSlide 24 Choosing Background Image Smaller images download faster and display faster. Check compatibility with background and text color. Images are tiled across the background. A simple design is usually the best.