February 7, 2012 - Exercise 1 and Exercise 2 are due on February 21 - Final Projects due on May 22, 2012

Basic HTML Formatting

Text is very important on web pages. While there is broad use of graphics and Flash on the web, text remains the champ for conveying information. Formatting the text on your web page can make your information easier and more pleasing to read. Some basic xHTML tags are explained below with tags "exposed" for view*.

These basic formatting tags set the structure for your web page. The initial appearance when using these tags is determined by the browser's default cascading style sheet and/or any special style choices chosen by the user in the browser preferences. After you have created a logical page structure, you will be styling the page contents to suit your own taste.

* Note that many of the elements are effected by my CSS definitions. To more accurately see how these elements look by default, turn off styles either in the view menu of your browser or using the CSS menu of the Web Developer Toolbar installed on FIrefox.

Block Level Elements

Block elements as so called because they take up a block of space to themselves in the flow of the document. That is, unless otherwise instructed, the block level element is vertically separated from the element above and below, and the horizontal space the element uses stretches the width of its containing element.

Headings

Organize your information with headings, they form the basis of the outline of information on your web page. The level one heading (h1) is the most important heading on the page and its default visual rendering is the biggest. You may only use one h1 on your page, depending on content (HTML5 allows more h1 tags per page). h2 headings are sub-headings of h1 headings, h3 headings are sub-headings of h2 headings, and so on. Remember creating an outline before writing an English composition? Headings are the main points of the outline.

Here is what they look like (with tags revealed).

<h1>header1</h1>

<h2>header2</h2>

<h3>header3</h3>

<h4>header4</h4>

<h5>header5</h5>

<h6>header6</h6>

Notice that they run 1-6, bigger to smaller and by default, the heading text aligns left. The heading text can be styled to align center and right as well.

<h3 style="text-align:center">Aligned Center</h3>

<h3 style="text-align:right">Aligned Right</h3>

Paragraphs

<p>Paragraphs can be used to hold information between the headings. A paragraph will "wrap" with the browser window width, just as text would in a page layout application. Depending on page language (some languages read from right to left), paragraphs usually align to the left side of their container. Also note that I've used some trickery to show where the paragraph tags are placed for illustration purposes in this section.</p>

<p style="text-align:center">Paragraph text can also center align.</p>

<p style="text-align:right">Paragraphs can align right as well.</p>

<p>Notice that each paragraph is vertically separated from the other by an empty line, this is produced by the default browser styling.</p>

<p>What if I don't want this line of separation?<br />
The break tag (<br />) will give a line break with no separating empty line.<br />
You may have<br />
lines as<br />
short as<br />
you<br />
like<br />
!<br />
Very handy for addresses and the like.</p>

Horizontal Rules

Horizontal rules make nice separators between sections. Their attributes include align, width (in pixels or percentage), size (or height), and "noshade" to eliminate the 3D look of the line. Here is horizontal rule with no attributes (<hr />).

Here is one five pixels in size, 70% in width and aligned center (<hr size="5" style="width:70%;text-align:center;" />).

Here is another, ten pixels in size, 70% in width, aligned center with the noshade attribute (<hr size="10" style="width:70%; text-align:center;" noshade="noshade" />).

These examples have been affected by my style sheet, make sure to view the page without styles to see how the horizontal rules look sans styling.

Divs

Div (or logical division) tags are used as containers to group the other block level elements so they can be styled and formatted en masse. The openning div tag (<div>) starts befor the group of elements you want to contain and ends (</div>) after.

Divs themselves, have no inate styling or context assigned, unlike the other block level elements. With div tags revealed, this and the next paragraph are styled with white text and a black background.

Divs are usually differentiated by using a class or id attribute in the openning tag to give your style sheet a "hook," you may also use the style attribute locally within the tag. You will find very handy the further we delve into styles and style sheets.

</div>

Divs are a the mainstay tag for xHTML page layout and will remain useful in to the future even with the introduction of more contextually rich tags in HTML5.

There are more block level elements in xHTML that will be covered in succeeding weeks, these are enough to get you started.

Inline Formatting Elements

Inline formatting elements reside in the regular stream or flow of text without forcing a break like a block level element. Below are some examples of inline formatting elements.

Phrase Elements

Phrase element tags assign a structural meaning to the enclosed text. Your browser may or may not choose to render the text differently from the surrounding text; text readers and search engines can interpret the structural meaning. I've listed a few below, check your textbook or other resource for more.

Abbreviation: Add two <abbr title="ounces">oz.</abbr> of chocolate chips to the batter.
Note that the "title" attribute is shown when the user's mouse hovers over the abbreviation. Text readers will also read the value of the title attribute aloud rather than stumble over the abbreviation
Acronym: Use <acronym title="Contrast Alignment Repetition Proximity">CARP</acronym> for better design.
Emphasis: The test was <em>very</em> hard!
Your browser will most likely render "very" in italics; a text reader will change sonic inflection as it reads the page.
Strong Emphasis: The test was <strong>really</strong> hard!
Most browsers render strong emphasis in bold; text readers speak it with vigor!

You may use your style sheet definitions to define the exact look you want from each of the phrase elements.

Font Styles

Font styles allow your to make text bold, italic, underlined, ~~strike through~~, big, small, or teletype text.

Font styles, however, only affect the visual styling of the enclosed text and do not assign any contextual meaning. Text readers read through them like normal text. Font styles are deprecated in HTML 4.0.1 strict and XHTML 1.0 strict, avoid their use. Phrase elements or a CSS definitions are used to replace font styles.

Jump into the future, go see HTML5 formatting!