Web Design in a Nutshell

Web Design in a Nutshell Chapter 10: Formatting Text

Summary • Text tags • Paragraphs and headings • Text appearance • Spacing and positioning • Lists • Working with HTML text • Paragraphs and line breaks • Headings • <div> & <span> • The <font> tag • Nesting lists • Character entity references

Synopsis • Designers accustomed to desktop publishing programs are usually shocked to find how little control HTML offers over the display of the page. • However, HTML was not developed as a method for designing how the page looks, but as a means of marking the structure of a document • Tags that do provide specific display information (e.g. <center>) are not true to the original HTML concept • The W3C has made these intentions clear by deprecating nearly all tags that control presentation in favor of CSS

Summary of text tags • Tags used for formatting text can be divided into 4 subgroups: • Paragraphs and Headings (block-level elements) • Text Appearance (inline styles) • Spacing and Positioning • Lists • Samples of text tags described in this chapter can be viewed at http://siu.globaleyes.com/syntax_hilight.php?file=files/MGMT362e/WDIAN/chapter10.html

Paragraphs and Headings • Block-level elements are always formatted with a line break before and after, with most adding some amount of additional space above and below as well • <address>…</address>: supplies the author’s contact information, typically at the beginning or end of a document. Usually formatted in italic type • <blockquote>…</blockquote>: used for lengthy quotations which are generally displayed with an indent on the left and right margins and added space above and below • cite=“URL”: provides information about the source from which the quotation was borrowed

Paragraphs and Headings (cont.) • <div>…</div>: denotes a generic “division” within the document. Because it has no presentation properties of its own, it can be used in conjunction with the class and id attributes and formatted with style sheets. Usually display with some added space above and below. • align=“center|left|right” (deprecated) • class=“name”: assigns a name to an element designated in a CSS • id=“name”: assigns a unique name to an element • style=“style properties”: embeds CSS formatting information • <hn>…</hn>: specifies that the enclosed text is a heading. There are 6 levels of heading from <h1> to <h6> • align=“center|left|right” (deprecated) • <p>…</p>: denotes the beginning and end of a paragraph. Browsers ignore multiple empty <p> elements. Displays with more added space above and below than the <div> tag • align=“center|left|right” (deprecated)

Text appearance • The following tags affect the appearance or meaning of text. With the exception of <basefont>, all of the tags in this section define inline styles, meaning they can be applied to a string of characters within a block element without introducing line breaks. • <abbr>…</abbr>: identifies the enclosed text as an abbreviation. This may be useful for non-visual browsers, speech synthesizers, translation systems, and search engines • title=“string”: provides the full text for the abbreviation • <abbr title=“Massachusetts”>MA</abbr> • <acronym>…</acronym>: indicates an acronym and is used similarly to <abbr> • title=“string”: provides the full expression for the acronym • <acronym title=“World Wide Web”>WWW</acronym>

Text appearance (cont.) • <b>…</b>: bolds the enclosed text • <basefont> (deprecated, no closing tag): specifies certain font attributes for text which follows the tag. Can be used in the <head> or <body> section • size=“value”: sets the basefont size using the HTML size values from 1-7 or relative values based on the default value of 3 • color=“#rrggbb|name”: sets the color of the following text • face=“font”: sets the font face for the following text • <big>…</big>: sets the type one font size larger than the surrounding text • <blink>…</blink>: causes the contained text to flash • <cite>…</cite>: denotes a citation. Generally displayed in italics • <code>…</code>: denotes a code sample. Generally displayed in the browser’s specified monospace font

Text appearance (cont.) • <del>…</del>: indicates deleted text. Has no inherent style qualities but may be used to hide deleted text from view or display it as strike-through text via style-sheet controls. Its counterpart is <ins> (inserted text) • cite=“URL”: can be set to point to a source document that explains why the document was changed • datetime=“YYYY-MM-DDThh:mm:ssTZD”: specifies date and time the change was made. TZD is the time zone designator (Z for UTC) • <dfn>…</dfn>: indicates the defining instance of the enclosed term. Usually rendered in bold text, it calls attention to the introduction of special terms and phrases. • <em>…</em>: indicated emphasized text. Nearly all browsers render emphasized text in italic

Text appearance (cont.) • <font>…</font> (deprecated): used to affect the style (color, typeface, and size) of the enclosed text • size=“value”: sets the basefont size using the HTML size values from 1-7 or relative values (+n or –n) based on the default value of 3 • color=“#rrggbb|name”: sets the color of the following text • face=“font|font-list”: sets the font face for the following text • <i>…</i>: enclosed text is displayed in italics • <ins>…</ins>: indicates that text has been inserted into the document. No inherent style qualities on its own but may be used to indicated inserted text in a different color via style sheet controls. • cite=“URL”: can be set to point to a source document that explains why the document was changed • datetime=“YYYY-MM-DDThh:mm:ssTZD”: specifies date and time the change was made. TZD is the time zone designator (Z for UTC)

Text appearance (cont.) • <kbd>…</kbd>: stands for “keyboard” and indicates text entered by the user. It is usually displayed in monospace and sometimes bolded • <q>…</q>: delimits a short quotation that can be included inline. Some browsers automatically insert quotation marks. When used with the lang attribute, the browser may insert language-specific quotation marks. • cite=“URL”: designates the source document from which the quote was taken • <s>…</s> or <strike>…</strike> (deprecated): enclosed text is displayed as strike-through • <samp>…</samp>: delimits sample output from programs, scripts, etc. Generally displayed as monospace • <small>…</small>: renders the type smaller than the surrounding text

Text appearance (cont.) • <span>…</span>: identifies a span of inline characters, but does not by default affect the formatting of those characters. It can be used in conjunction with the class or id attributes and formatted with CSS • class=“name”: assigns a name to an element or # of elements • id=“name”: assigns a unique name to an element • style=“style”: embeds style information to be applied to contents • <strong>…</strong>: enclosed text is strongly emphasized. Nearly all browsers render text as bolded. • <sub>…</sub>: formats enclosed text as subscript • <sup>…</sup>: formats enclosed text as superscript • <tt>…</tt>: formats enclosed text as teletype text. Generally displayed in a monospaced font • <u>…</u> (deprecated): enclosed text is underlined • <var>…</var>: indicates an instance of a variable or program argument. Browsers usually render text as italicized.

Spacing and positioning • The following tags give authors control over the line breaks, alignment, and spacing. Tables and CSS offer better control than most of the minimal controls here • <br>: breaks the text and begins a new line, but does not add extra space • clear=“all|left|right|none”: breaks the text flow and resumes the next line after the specified margin is clear. Often used to start the text below an aligned image (preventing text wrap). none is the default • <center>…</center> (deprecated): centers the enclosed elements horizontally on the page (a shortcut to <div align=“center”>) • <nobr>…</nobr> (nonstandard): text & graphics between will always display on a single line

Spacing and positioning (cont.) • <pre>…</pre>: delimits preformatted text, meaning that lines are displayed exactly as they are typed in, honoring multiple spaces and line breaks. Text is usually displayed in a monotype font • width=“value” (deprecated): determines how many characters to fit on a single line within the <pre> block • <wbr>…</wbr> (nonstandard): indicates a potential word break point. The <wbr> tag works only when placed within <nobr>-tagged text and causes a line break only if the current line already extends beyond the browser’s display window margins

Lists • The following is a collection of tags used for formatting a number of different types of lists in HTML. Any list can be nested within another list. • <dir>…</dir> (deprecated): creates a directory list consisting of list items <li>. Directory lists were originally designed to display lists of files with short names, but they have been deprecated with the recommendation that unordered lists (<ul>) be used • <dl>…</dl>: indicates a definition list consisting of terms (<dt>) and definitions (<dd>) • compact (deprecated): makes the list as small as possible. Few browsers support the compact attribute • <dd>…</dd>: denotes the definition portion of an item within a definition list. Usually displayed with an indented left margin • <dt>…</dt>: denotes the term portion of an item within a definition list

Lists (cont.) • <li>: defines an item within a list. Used with the <dir>, <ol>, and <ul> tags • type=“format” (deprecated): changes the format of the automatically generated numbers or bullets (disc, circle, or square) • value=“number” (deprecated): within ordered lists, you can specify the number of an item. Following list items increase from the specified number • <menu>…</menu> (deprecated): indicates the beginning and end of a menu list which consists of list items <li>. Menus are intended to be used for a list of short choices • <ol>…</ol>: defines the beginning and end of an ordered (numbered) list which consists of list items <li>. Item numbers are inserted automatically by the browser • start=“number”: starts the numbering of the list at number instead of at 1 • type=“1|A|a|I|I” (deprecated): defines the numbering system for the list ((1,2,3,4,…),(A,B,C,D,…),(a,b,c,d,…),(I,II,III,IV,…), or (i,ii,iii,iv,…)).

Lists (cont.) • <ul>…</ul>: defines the beginning and end of an unordered (bulleted) list which consists of list items <li>. Bullets for each list item are inserted automatically by the browser • type=“disc|circle|square” (deprecated): defines the shape of the bullets for each list item

Working with HTML text • After establishing the skeleton of the document (chapter 9), a good place to begin formatting a web document is to establish the general structure of the contents by adding HTML tags that create paragraphs and heading levels in the raw text • A browser starts a new paragraph or adds a line break only if it encounters a tag in the HTML source that tells it to do so. Otherwise, it ignores the carriage returns and extra spaces in the HTML source. Without tags, all content in the HTML document wraps automatically to fill the width of the browser window

Paragraphs and line breaks • Paragraphs are the most rudimentary elements of a text document • If you want to break a line but not add any extra space, insert a line break with the <br> tag. This element does not have a closing tag and it can be placed in the flow of text where you want the line break to occur

Headings • Headings are displayed in bold text with automatic line breaks and extra space above and below. • There are 6 levels of HTML headings, ranging from <h1> to <h6>. • Browsers display headings with a diminishing font size so that <h1>s are displayed in the largest possible font and <h6> are displayed with the smallest (<h5> & <h6> are generally sized the same as or smaller than the default body text). • Legal HTML syntax requires that headings appear in order (e.g. an <h2> cannot precede or exist without an <h1>). In practice, however, designers often pick and choose from heading levels to create desired presentation effects (most consider <h1> to be too large).

<div> and <span> • 2 generic tags, <div> and <span> can be used to structure and label the contents of a web document • The <div> tag divides a document into distinct sections. • The <span> tag is an inline element that can be applied to a string of text within a paragraph or other content flow. It does not introduce a line break. • The class attribute is used to identify various elements as belonging to a group. If you want the glossary words in a document to display in green type, identify each word as a with the “glossary” class and use a style sheet to affect the display of all “glossary” terms: span.glossary {color: green;} <span class=“glossary”>resolution</span> and <span class=“glossary”>color depth</span> • NOTE: the class and id attributes can be used in most tags

The <font> tag • You can use the size attribute of the <font> tag to adjust type size. • Browsers measure HTML type on a relative scale from 1 to 7, where 3 is the default and is determined by the client’s preferences. • These are relative sizes and do not signify actual pixel or point adjustments. Each size is successively about 20% smaller or larger than the previous or next. • Size can be specified as an absolute value (e.g. size=4) or as a relative value (e.g. size=“+1”). Relative adjustments are not cumulative.

Specifying fonts with <font> • The face attribute does not guarantee that the user will see your text in the specified font. Consider it merely a recommendation. • The quote-enclosed value of the face is one or more display font names separated by commas • The browser looks at the string of font names until it finds one that is installed on the user’s system and can be displayed. If none of the suggested fonts are installed, the default font is used <font face=“verdana,arial,sans-serif”>your text</font> • You can include a generic font family (serif, sans-serif, monospace, cursive, or fantasy) as the last choice in your list allowing the browser to choose any available font within that class should the named fonts not be found

Nesting lists • Any list can be nested within another list (you can add a bulleted list item under an item within a numbered list). Lists can be nested several layers deep, but if you nest too deeply, your text may end up past the right margin. • When unordered lists are nested, the browser automatically displays a different bullet for each consecutive level • Ordered lists do not automatically display their nested levels in standard outline format. Every level within a nested numbered list will display with numbers unless you change the type.

Character entity references • Characters not found in the normal alphanumeric character set must be specified in HTML using character entities. • Character entities can be referenced by name (&name;) or by numeric value (&#nnn;). The browser interprets the string to display the proper character. • Named entities are preferable because numeric values may be interpreted differently on different platforms

Common special characters

Web Design in a Nutshell