12/24/2015XHTML Basics 21 Spring, 2008 Modified by Linda Kenney 2/18/08

12/24/2015XHTML Basics 22 Heading Tags Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

12/24/2015XHTML Basics 23 heading2.html Sample Heading Tags 2 … Heading Level 1 This is a sample paragraph about HTML and XHTML. XHTML is the newest version of HTML. XHTML uses the tags and attributes of HTML along with the syntax of XML. Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

12/24/2015XHTML Basics 24 heading3.html Sample Heading Tags 3 … Heading Level 1 This is a sample paragraph about HTML and XHTML. XHTML is the newest version of HTML. XHTML uses the tags and attributes of HTML along with the syntax of XML. Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

12/24/2015XHTML Basics 25 Lists for structure Lists are used to organize info in a linear fashion along a single dimension. There are three different types of lists available for different situations.

12/24/2015XHTML Basics 26 Unordered lists To present a simple list of items for which order is unimportant, use an unordered list The container element is used to define an unordered list  Within the element there must be one or more elements Each container represents a separate item within the list Each item within the list will be rendered with a generic bullet of some sort preceding it

12/24/2015XHTML Basics 27 Ordered lists To present a simple list of items for which order is an important consideration, use an ordered list The container element is used to define an ordered list  Within the element there must be one or more elements Each container represents a separate item within the list Each item within the list will be rendered with a prefix that indicates its relative position within the ordering

12/24/2015XHTML Basics 28 heading5.html Headings and Lists … Web Servers & Web Browsers Popular Web Servers Apache Web Server Microsoft IIS Sun Java System Web Server Popular Web Browsers Internet Explorer Firefox Opera

12/24/2015XHTML Basics 29 Nested lists List items may contain a wide variety of things, including other lists. When a list appears within a list item of another list, it is called a nested list. Creating a nested list in XHTML is very simple.  Just write the nested list as you normally would, but do so inside an element of another list.  The only tricky part is keeping track of the end tags.  You may freely nest lists of any type inside lists of any type.

12/24/2015XHTML Basics 210 Nested lists ( lists.html)lists.html

12/24/2015XHTML Basics 211 Definition lists For more complex lists, where each item actually consists of a pair of items, use a definition list Although originally intended to present terms and their definitions, definition lists are useful anytime you need to list items as associated pairs The container element is used to define a definition list  Within the element there must be one or more and/or elements Typically, the and elements will appear in pairs, although this is not a strict requirement Each container represents a term or phrase to be defined Typically, each element is followed by an associated element that represents the definition of the term or phrase Browsers commonly present a definition list by indenting the elements farther than the elements

12/24/2015XHTML Basics 212 definitionlist.html Definition List … Sample Definition List TCP Transmission Control Protocol is a method (protocol) used along with the Internet Protocol (IP) to send data in the form of message units, called packets, between computers over the Internet. IP Internet Protocol is the method or protocol by which data is sent from one computer to another on the Internet. Each computer on the Internet is uniquely identified by an IP address. FTP File Transfer Protocol is a protocol used to exchange files between computers on the Internet. HTTP Hypertext Transfer Protocol is the protocol used for exchanging text, graphic images, sound, video, and other multimedia files on the Web.

12/24/2015XHTML Basics 213 XHTML tag Blockquote tag Used to indent a block of text for special emphasis. …text goes here

12/24/2015XHTML Basics 214 blockquote.html Blockquote Example … Markup Languages Part of the inhumanity of the computer is that, once it is competently programmed and working smoothly, it is completely honest. Isaac Asimov (see p. 65)

12/24/2015XHTML Basics 215 XHTML tag Preformatted Text tag The preformatted text tag preserves your formatting and displays the text in a fixed-width or monospace font. …text goes here Line breaks and formatting are preserved NOTE: You will seldom use the tag

12/24/2015XHTML Basics 216 preformat.html Preformatted Text … Exploring Preformatted Text Using the pre tag HTML HyperText Markup Language DHTML Dynamic HyperText Markup Language XHTML eXtensible HyperText Markup Language XML eXtensible Markup Language Not using the pre tag HTML HyperText Markup Language DHTML Dynamic HyperText Markup Language XHTML eXtensible HyperText Markup Language XML eXtensible Markup Language

12/24/2015XHTML Basics 217 XHTML Logical Style Tags Indicate the logical style used to display the text in between the container tags. Common Logical Style Tags To cause text to be emphasized or to "stand out" from surrounding text. Usually displayed in bold. This is important To cause text to be emphasized in relation to other text on the page. Usually displayed in italics. Please note This is important, but not nearly as important as this.

12/24/2015XHTML Basics 218 Horizontal rules To insert a horizontal rule, use the element. When it encounters an element, a browser replaces it with a horizontal rule. Note that since a horizontal rule spans the page, it always appears on a line by itself. This is a short paragraph followed by a horizontal rule. This is another short paragraph that comes after the rule.

12/24/2015XHTML Basics 219 Generic divisions Sometimes, we need the ability to collect some text into a generic division of a document. Remember that making it a paragraph or a heading carries with it some conceptual “baggage”. What? When that baggage would get in the way, we can use the element define a block of text without any conceptual baggage. This is just a generic block of text. It is neither a heading nor a paragraph, and therefore it will generally have no default presentation.

12/24/2015XHTML Basics 220 Generic divisions (cont.)  Like the paragraph and heading elements, the element is a block-level container element. What does that mean?  Everything we place inside the of an XHTML document must be inside a container of some sort. And the element comes in handy when we need a block- level container that doesn’t imply anything else. It is also used extensively with CSS, as we’ll eventually see.  Because is a block-level element, the one place you should not use it is inside a heading or a paragraph.

12/24/2015XHTML Basics 221 Abbreviations and acronyms Other elements inform the browser that a word is an abbreviation or an acronym. Use the element around an abbreviation and the element around an acronym.  Most visual browsers will not render the contents of these elements differently than any other text.  Blind and low-vision users of the Web often use screen readers. Unlike a visual browser, which renders the page on the screen, a screen reader reads the contents of a page aloud.

12/24/2015XHTML Basics 222 Abbreviations and acronyms (cont.) Both of these elements can accept a title attribute. The value of the title attribute should provide the expanded form of the acronym or the word(s) being abbreviated. This allows screen readers to pronounce the word or phrase being abbreviated rather than trying to pronounce the acronym or abbreviation as a word. Most visual browsers will not use the value of the title attribute. She earned her B.A. from the University of Dayton and her M.S. from UNH.

12/24/2015XHTML Basics 223 Superscripts When smaller text appears above the baseline of the surrounding text, it is called a superscript For example, 2 nd and 2 64 both require superscripts To superscript something in XHTML enclose it in a container Web 101, 2 nd edition, by Wendy Lehnert 2 64 is a very large number

12/24/2015XHTML Basics 224 Subscripts When smaller text appears below the baseline of the surrounding text, it is called a subscript For example, CC and H 2 O require subscripts To subscript something in XHTML enclose it in a container CC is one way to indicate a hexadecimal value The chemical formula for water is written as H 2 O

12/24/2015XHTML Basics 225 Reserved characters There are four reserved characters that have special meaning within XHTML source. When a browser is rendering XHTML source and it sees <, it means “a tag starts here”. When a browser sees a > in XHTML source, it means “a tag ends here”. When a browser sees a " in XHTML source, it means “an attribute value starts or ends here”. And when a browser sees an & in XHTML source, it means “a character entity starts here”.

12/24/2015XHTML Basics 226 Reserved characters (cont.) Sometimes, however, we need to actually use these characters within our page content. For example, we need a way to tell the browser that we actually want it to just display the < as part of the rendered page, not treat it as the beginning of a tag. To accomplish this, the browser needs a way to distinguish between these two potential uses of a single character.  If we use a character entity in place of the character itself when we want it to appear in the text “as is,” the browser can tell the difference.

12/24/2015XHTML Basics 227 Character entities Character entities, like tags, are codes that can be embedded within XHTML source that have special meaning to the browser. Unlike tags, however, they are not enclosed in angle brackets.  Instead, character entities start with an & and end with a ; When the browser encounters a character entity, it replaces it with the character that it represents.  We can use character entities to insert reserved characters into our XHTML source.  We can also use them to insert characters that are not easily typed using the keyboard.

12/24/2015XHTML Basics 228 Character entities (cont.) Some examples follow.  Note that, like tag and attribute names, character entities are case-sensitive in XHTML. Reserved characters << >> "" && Symbolic characters ©© ££ ¬¬ °° Foreign characters ÉÉ éé ÅÅ ïï To insert a non-breaking space, use To insert a soft hyphen, use ­

12/24/2015XHTML Basics 229 Character entities (cont.) entity/index.php html

12/24/2015XHTML Basics 230 For a sample page that discusses and demonstrates how to apply much of the material we’ve covered so far, see textstructure.htmltextstructure.html Also see:

12/24/2015XHTML Basics 231 Summary of XHTML rules Tags must be enclosed within angle brackets. Container elements must always include both a start tag and the matching end tag. Empty elements must always end with a slash before the closing angle bracket. Attributes are always specified as an attribute name, an equal sign, and a double-quoted value. Attributes never appear in end tags. With the exception of, all tag and attribute names are case- sensitive. Nested elements must be completely enclosed within their containing element. XHTML files must be simple text files without special characters (such as “curly quotes”), so use text editors, not word processors, to work on them. Every page you write should begin with the element presented earlier. Every page you write should have the element presented earlier following the element. Every page you write should include one, and only one, and element inside the element. Everything else should be either inside the or inside the. Every element should contain a element and the element presented earlier. Use whitespace for spacing and indentation to make your source more readable. Avoid extra whitespace in tag names, attribute names, and attribute values.

12/24/2015XHTML Basics 232 XHTML elements presented (See Appendix A) … … … …