1. ULI101: XHTML Basics (Part III) Introduction to XHTML / Continued … Block-Level vs. Inline Elements (tags) Manipulating Text, &nbsp, Text Characteristics,,,,,,,,,,,,,,, Font Attributes: size, color, face Horizontal Rule

2. 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 Refer to web page www.htmlhelp.com as a guide to followwww.htmlhelp.com Paragraph 1 Text text text Paragraph 2

3. Block-Level Elements Headings The tags,,,,, and are display headings. Level 1 headings are the most prominent (largest) headings, and level 6 headings 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., … )

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

5. Block-Level Elements  Indents a paragraph works almost like tag, except the whole paragraph will be indented one tab – 5 spaces. A closing tag is required.  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

6. Block-Level Elements  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. or ) size – changes the thickness of the line (eg. ) noshade – sets line to display no shading (eg. ) Note: Refer to “INT222 Notes” for examples and links to other block-level tags.

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

8. Manipulating Text  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)

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

10. Text Characteristics  text Displays text in boldface type  text 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  text Displays text in a different style to indicate that is a citation. Netscape display citations in italics  text Displays text in the browser’s default fixed-width font. For large sections of text where formatting is important, use the or tags to preserve the space characters and line breaks.

11. Text Characteristics  text Displays text in a emphasized style. Netscape displays emphasized text in italics.  text Displays text in italic  text 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.

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

13. Text Characteristics  text Displays text as a subscript. A subscript appears slightly below the baseline (bottom edge) and in a smaller font.  text Displays text as a superscript. A superscript appears slightly above the top of the preceding text and in a smaller font.  text Displays text in the fixed width (typewriter) font. It usually has the same result as the and tags.  text Underlines the text it encloses. Gaps between words in the enclosed text are also underlined.

14. Text Characteristics  text Displays text in a special font to show that it is a variable. Netscape displays tag in italic.  text The 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

15. Text Characteristics  Font Attributes: Font Size, Font Color text Used to change the font size of text (or parts of your web page). Plus sign increases size, minus sign reduces size text 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.

16. Text Characteristics  Font Attributes: Font Face text 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…

17. Images The 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:  It is recommended that you always include the width and height attributes of the image as well…