ULI101: XHTML Basics (Part III)

ULI101: XHTML Basics (Part III) • Introduction to XHTML / Continued … • Block-Level vs. Inline Elements (tags) • Manipulating Text • <br />, &nbsp, <blockquote> • Text Characteristics • <b>,<big>,<cite>,<code>,<em>,<i>, <kbd>,<pre>,<s>,<strike>,<strong>,<sub>,<sup>,<tt>,<u>,<var> • Font • Attributes: size, color, face • Horizontal Rule

Block-level vs. Inline Elements • Tags (elements) contained in the body section of the web page are of two types: • Block-Level Elements • Blank line above and below structured element. Used to create “larger structures” (eg. Paragraphs, headings, etc…) • Block-level elements may contain in-line elements or other block-level elements • Inline Elements • No blank line above and below element • Inline elements can only contain data and other inline elements Paragraph 1 Paragraph 2 Texttexttext Refer to web page www.htmlhelp.com as a guide to follow

Block-Level Elements • Headings • The tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are display headings. • Level 1 headings <h1> are the most prominent (largest) headings, and level 6 headings <h6> are the least prominent (smallest). • Headings are usually displayed in a bolder, larger font than normal text. • Heading elements start on a new line. All browsers add extra space before heading elements. • Closing Tags are required (i.e. </h1>, </h2> … </h6>)

Block-Level Elements • paragraphs • The <p> tag displays a paragraph • All <p> elements start on a new line and are usually preceded by extra space • You can also use the <p> tag to insert a line break with extra space. To insert a line break without adding extra space, use the <br /> tag • A closing tag is required. Refer to INT222 web page for examples of body attributes, comments, headings and paragraph tags

Block-Level Elements • <blockquote> • Indents a paragraph • <blockquote> works almost like <p> tag, except the whole paragraph will be indented one tab – 5 spaces. • A closing tag is required. • <pre> • Displays text as is (i.e. suppresses interpretation of some HTML/XHTML tags) • A closing tag is required. • Allows author to add spaces and new lines without having to revert to special codes such as or <br />

Block-Level Elements • <hr /> Horizontal Rule (i.e. line) • This tag will put a line across a screen. You can use a horizontal rule to visually divide information or sections. • Here are attributes that can change the look of the horizontal rule (line): • width – changes the width of line in terms of pixels (dots of light) or percentage of screen( eg. <hr width=‘120’ /> or <hr width=‘65%’ /> ) • size – changes the thickness of the line(eg. <hr size=‘5’ />) • noshade – sets line to display no shading(eg. <hr noshade=‘noshade’ /> ) Note: Refer to “INT222 Notes” for examples and links to other block-level tags.

Manipulating Text • Spacing in HTML/XHTML is very different from the normal way we think of spacing in any text editor. This is because, browsers don’t count white space such as carriage returns, a series of spaces and tabs. • To get this same effect, you will need to use special tags or special codes.

Manipulating Text • <br /> • Equivalent to a Carriage Return (i.e. start on next line) • • Will automatically add one space (non-breaking space) • To indent 5 times, then repeat code 5 times(i.e. ) Note: special characters require use of &# followed by a decimal code (eg. ASCII) of character, followed by a semicolon ; . For example < would display a less-than sign <(refer to special code chart on INT222 in week 3 notes)

Text Characteristics • This section deals with tags that set text characteristics. • All tags appearing in this section are inline tags that have an opening and closing tag.

Text Characteristics • <b>text</b> • Displays text in boldface type • <big>text</big> • Increases the font size from its current value by 1. It has the same effect as using the font tag with a size value of +1 • <cite>text</cite> • Displays text in a different style to indicate that is a citation. Netscape display citations in italics • <code>text</code> • Displays text in the browser’s default fixed-width font. • For large sections of text where formatting is important, use the <pre> or <xmp> tags to preserve the space characters and line breaks.

Text Characteristics • <em>text</em> • Displays text in a emphasized style. Netscape displays emphasized text in italics. • <i>text</i> • Displays text in italic • <kbd>text</kbd> • Displays text in a special font that is meant to indicate that the user should type the text on the keyboard. Netscape displays the specified text in the current fixed-width font.

Text Characteristics • <s>text</s> • Displays text with a line (strike through it). • The <s> tag has the same effect as the <strike> tag. • <small>text<small> • Reduces the font size from its current value by 1. It has the same effect as using the <font> tag with a size value of –1 • <strike>text</strike> • Displays text with a line (strike) through it. The <strike> tag has the same effect as the <s> tag. • <strong>text</strong> • Displays text with a strong emphasis. • Netscape uses boldface to indicate strong emphasis.

Text Characteristics • <sub>text</sub> • Displays text as a subscript. • A subscript appears slightly below the baseline (bottom edge) and in a smaller font. • <sup>text</sup> • Displays text as a superscript. A superscript appears slightly above the top of the preceding text and in a smaller font. • <tt>text</tt> • Displays text in the fixed width (typewriter) font. It usually has the same result as the <kbd> and <code> tags. • <u>text</u> • Underlines the text it encloses. Gaps between words in the enclosed text are also underlined.

Text Characteristics • <var>text</var> • Displays text in a special font to show that it is a variable. Netscape displays <var> tag in italic. • <font>text</font> • The <font> tag allows you to change the color, size, and typeface (font family) of the font. • All text between the tags is displayed with the specified the specified font characteristics relative to the default font for the browser

Text Characteristics • Font Attributes: Font Size, Font Color • <font size=‘+2’>text</font> • Used to change the font size of text (or parts of your web page). Plus sign increases size, minus sign reduces size • <font color=‘#0000FF’>text</font> • Used to change the color of font. Although, color names like ‘red’ can be used, it is suggested to use browser-safe colors. • Hexadecimal numbers accompany the number sign # to display mixers of Red, Blue and Green to create the color.

Text Characteristics • Font Attributes: Font Face • <font face=‘helvetica’>text</font> • Used to change the font face (style). • If the font you include on your web pages isn’t on someone else’s computer, then the browser will use the default – Arial. • You can use more than one font face by using a comma. If the first one is not available, then use second one, etc…

Images • The <img /> tag specifies an image to be displayed in an HTML document. • The src attribute of the img tag indicates the image to display. The alt attribute (alternative name), is what shows up in place of the picture, if the picture fails to load or if the visitor has turns "loading images" off. The minimum requirement for an img tag is: • <img src="url" alt="value" /> • It is recommended that you always include the width and height attributes of the image as well…

ULI101: XHTML Basics (Part III)