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

04/21/23 XHTML Basics 2 1

XHTML Basics 2

Spring, 2008

Modified by Linda Kenney2/18/08


Heading Tags

<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>


heading2.htmlSample Heading Tags 2…

<body><h1>Heading Level 1</h1><p>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.

</p><h2>Heading Level 2</h2> <h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6></body></html>


heading3.htmlSample Heading Tags 3…

<body><h1>Heading Level 1</h1><p>This is a sample paragraph about HTML and XHTML.<br

/>XHTML is the newest version of HTML. XHTML uses the tags

and attributes of HTML along with the syntax of XML. </p><h2>Heading Level 2</h2> <h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6></body></html>


Lists for structureLists are used to organize info in a linear fashion along a single dimension.

There are three different types of lists available for different situations.


Unordered listsTo present a simple list of items for which order is unimportant, use an unordered list

The <ul> container element is used to define an unordered list

Within the <ul> element there must be one or more <li> elements

Each <li> 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


Ordered listsTo present a simple list of items for which order is an important consideration, use an ordered list

The <ol> container element is used to define an ordered list

Within the <ol> element there must be one or more <li> elements

Each <li> 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


heading5.htmlHeadings and Lists…

<body><h1>Web Servers & Web Browsers</h1> <h2>Popular Web Servers</h2> <ol> <li>Apache Web Server</li> <li>Microsoft IIS</li> <li>Sun Java System Web Server</li> </ol> <h2>Popular Web Browsers</h2> <ul> <li>Internet Explorer</li> <li>Firefox</li> <li>Opera</li> </ul></body></html>


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 <li> 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.


Nested lists ( lists.html)


Definition listsFor 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 <dl> container element is used to define a definition list Within the <dl> element there must be one or more <dt>

and/or <dd> elements Typically, the <dt> and <dd> elements will appear in pairs, although this is not

a strict requirement Each <dt> container represents a term or phrase to be defined Typically, each <dt> element is followed by an associated <dd> element that

represents the definition of the term or phrase Browsers commonly present a definition list by indenting the <dd> elements

farther than the <dt> elements


definitionlist.htmlDefinition List …

<body><h1>Sample Definition List</h1><dl> <dt>TCP</dt> <dd>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.</dd>

<dt>IP</dt> <dd>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.</dd>

<dt>FTP</dt> <dd>File Transfer Protocol is a protocol used to exchange files between

computers on the Internet. </dd>

<dt>HTTP</dt> <dd>Hypertext Transfer Protocol is the protocol used for exchanging text,

graphic images, sound, video, and other multimedia files on the Web.</dd></dl></body></html>


XHTML <blockquote> tag

Blockquote tagUsed to indent a block of text for special emphasis.

<blockquote>

…text goes here

</blockquote>


blockquote.htmlBlockquote Example …

<body><h1>Markup Languages</h1> <blockquote>

Part of the inhumanity of the computer is that, once it is competently programmed and working smoothly, it is completely honest. </blockquote>

<cite> Isaac Asimov </cite> (see p. 65)

</body></html>


XHTML <pre> tag

Preformatted Text tagThe preformatted text tag preserves your formatting and displays the text in a fixed-width or monospace font.

<pre> …text goes here Line breaks and formatting are preserved</pre>

NOTE: You will seldom use the <pre> tag


preformat.htmlPreformatted Text…

<body><h1>Exploring Preformatted Text</h1> <h2>Using the pre tag</h2> <pre> HTML HyperText Markup Language DHTML Dynamic HyperText Markup Language XHTML eXtensible HyperText Markup Language XML eXtensible Markup Language </pre> <h2>Not using the pre tag</h2> <p> HTML HyperText Markup Language DHTML Dynamic HyperText Markup Language XHTML eXtensible HyperText Markup Language XML eXtensible Markup Language </p></body></html>


XHTML Logical Style TagsIndicate the logical style used to display the text in between the container tags.

Common Logical Style Tags

<strong></strong> To cause text to be emphasized or to "stand out" from

surrounding text. Usually displayed in bold. <strong>This is important</strong>

<em></em> To cause text to be emphasized in relation to other text on the

page. Usually displayed in italics.<em>Please note</em>

<p>This is <em>important</em>, but not nearly as important as

<strong>this</strong>.</p>


Horizontal rulesTo insert a horizontal rule, use the <hr /> element. When it encounters an <hr /> 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.

<p>This is a short paragraph followed by a horizontal rule.</p><hr /><p>This is another short paragraph that comes after the rule.</p>


Generic divisionsSometimes, 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 <div> element define a block of text without any conceptual baggage.

<div>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.</div>


Generic divisions (cont.) Like the paragraph and heading elements, the

<div> element is a block-level container element.

What does that mean?

Everything we place inside the <body> of an XHTML document must be inside a container of some sort.

And the <div> 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 <div> is a block-level element, the one place you should not use it is inside a heading or a paragraph.


Abbreviations and acronymsOther elements inform the browser that a word is an abbreviation or an acronym.

Use the <abbr> element around an abbreviation and the <acronym> 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.


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.

<p>She earned her <abbr title="Bachelor of Arts">B.A.</abbr> from the University of Dayton and her <abbr title="Master of Science">M.S.</abbr> from <acronym title="The University of New Hampshire">UNH</acronym>.</p>


SuperscriptsWhen smaller text appears above the baseline of the surrounding text, it is called a superscript For example, 2nd and 264 both require

superscripts To superscript something in XHTML enclose it in

a <sup> container

<p>Web 101, 2<sup>nd</sup> edition, by Wendy Lehnert</p>

<p>2<sup>64</sup> is a very large number</p>


SubscriptsWhen smaller text appears below the baseline of the surrounding text, it is called a subscript For example, CC663316 and H2O require

subscripts To subscript something in XHTML enclose it in

a <sub> container

<p>CC6633<sub>16</sub> is one way to indicate a hexadecimal value</p>

<p>The chemical formula for water is written as H<sub>2</sub>O</p>


Reserved charactersThere 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”.


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.


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.


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


Character entities (cont.)

http://www.digitalmediaminute.com/reference/entity/index.php

http://www.cookwood.com/html/extras/entities.html


For a sample page that discusses and demonstrates how to apply much of the material we’ve covered so far, see textstructure.html

Also see:http://pubpages.unh.edu/~ltv6/cis599/samples/

chapter2/


Summary of XHTML rulesTags 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 <!DOCTYPE>, 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 <!DOCTYPE> element presented earlier.Every page you write should have the <html> element presented earlier following the <!DOCTYPE> element.Every page you write should include one, and only one, <head> and <body> element inside the <html> element.Everything else should be either inside the <head> or inside the <body>.Every <head> element should contain a <title> element and the <meta /> 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.


XHTML elements presented (See Appendix A)

<blockquote>…</blockquote>

<br /><cite> … </cite><dd>… </dd><dl>… </dl><dt>… </dt><div><em>…</em>

<h1>…</h1><h2>…</h2><h3>…</h3><h4>…</h4><h5>…</h5><h6>…</h6><hr /><li> …</li><ol>… </ol><p>…</p><pre>… </pre><strong>…</

strong><ul> </ul>

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

Documents

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