Formatting Text with HTML

Objectives: Students will be able to: Define the structure of the document with block elements Format numbered, bulleted, and definition lists Adding bold, italic, and other inline styles to text Adjusting text size, font, and color with the tag Align text on the page with HTML Using special characters

“Typesetting” on the Web Marking up text on the Web is different than specifying type for print Unknown fonts available for different computer users Text won’t show up in that font unless it is already installed on the user’s machine Stuck with the browser’s default interpretation of each tag

“Typesetting” on the Web Two Fonts Proportional font Allots different amounts of space to each character Capital “W” takes up more space than a lowercase “i” Constant-width font Allots the same amount of horizontal space to all the characters Capital “W” takes up no more space than a lowercase “i”

“Typesetting” on the Web Text in Graphics The only way to have absolute control over the display of type is to make it part of a graphic. Try to resist using many GIF files because: Graphics take much longer to download than text Information in graphics cannot be indexed or searched Content will be lost on nongraphical browsers or to users that turn off the graphics

Building Blocks The distinct parts that make up a document are known as block elements, and they are defined by block element tags Line breaks and spacing above and below are automatically inserted Paragraph ….. Headings …… Quotations …… Preformatted text …….

Building Blocks Paragraphs … Display in the browser’s default proportional font with extra space above and below Cannot use a string of empty tags to add extra space between elements. Browsers will not recognize Line Break Breaks a line without adding extra space around it May stack tags to add space between elements

Building Blocks Headings … Six levels of headings to Headings are displayed in bold text displays in the largest heading size

Building Blocks Long Quotations … Use for long quotations Displayed with indented left and right margins Adds extra space above and below Preformatted Text … Displays in the browser’s constant-width font with extra space added above and below Text between tags is displayed exactly as it is typed including all returns and multiple character spaces

Let’s Try It Open NotePad Set up the basic HTML document structure Type the following text between the body tags of the document structure First Level Heading Second Level Heading Third Level Heading Fourth Level Heading Fifth Level Heading Sixth Level Heading Here’s a little default body text for comparison Add the appropriate tags to the lines of text Add a tag of the last line of text Save it as headings.html and view the page in the browser.

Let’s Try It Complete Exercise 7-2 handout

Lists 3 types of lists with HTML Ordered lists (numbered lists) Unordered lists (bulleted lists) Definition lists (for terms and their definitions)

Lists Ordered Lists … Used when the sequence of items is important Browsers automatically insert a number before each list item List will be renumbered automatically if you insert or delete an item container tag identifies the entire list as “ordered” Each item within the list has a … (list item) tag.

Lists Ordered Lists … Change the style of numbering with type attribute 5 possible values 1 (numbers) A (uppercase letters) a (lowercase letters) I (uppercase roman numerals) i (lowercase roman numerals) Use the start attribute to specify a starting number other than 1 or Able to combine start and type attributes in one tag

Lists Unordered Lists …. Bulleted lists Each item within the list is specified with … (list item) tags Change the style of bullets with type attributes Disc Circle Square

Lists Definition Lists … Used for displaying lists of words with blocks of descriptive texts … tags are used to mark the beginning and end of the entire list Each word (term) is marked with the tag Displayed against the left margin with no extra space above or below Each definition is marked with a tag Displays on an indent

Lists Nesting Lists Any list can be nested within another list Can add a bulleted list to a numbered list

Let’s Try It Complete exercise 7-3

Inline Styles Inline style tags Affect the appearance of text right in the text flow Don’t introduce line breaks or extra spaces Commonly used inline style tags … or … italics text … or … bold text … typewriter text … underlined text … or … strikethrough text … subscript … superscript Combining Styles Able to apply several styles to the same piece of text by wrapping one set of style tags around another Caution!

Let’s Try It Complete Exercise 7-4

The Tag tag Inline style tag that uses attributes to control the typeface, size and color of text. Uses attributes Controlling font size … Size attribute controls the size of the enclosed text. Can only specify the size of text relative to the default font size Specify larger or smaller type relative to the default value of 3 The value of the size attribute can be either absolute or relative. Absolute values Numerals 1 through 7 Each size increment about 20% larger than the size before Type set to 4 is 20% larger than type set to 3 Type set to 2 is 20% smaller than type set to 3 Relative values Use a plus or minus sign to say how many increments larger or smaller then the default size One increment smaller than default is -1 One increment larger than default is +1

The Tag Changing the default text size tag sets the default size of text When placed in the tags of the document, the tag affects all the text in the document

The Tag Specifying a Typeface … The specified typeface will only be used if found on the user’s machine List fonts from specific to more generic … If browser cannot find Verdana, then use Helvetica. If not Helvetica, then use any sans-serif font available. Specifying Type Color … Color attribute can be one of 140 standard color names Color attribute can be a numeric value

The Tag Combining Styles You can put many attributes within a single opener tag Order doesn’t matter … Can be nested with other inline styles CAUTION!

Let’s Try It Complete Exercise 7-5

Aligning Text Left and Right alignment Default alignment is left or Sets alignment to the right margin Works in both paragraph tags and heading tags or Sets alignment center to the margins … Center whole page

Aligning Text Indents There is no indent function in standard HTML Use the following to indent text: tag to produce an indent on both the left and right margins … with no list items to display text as indented … with only definitions ( ) and no terms to display text as indented.

Aligning Text Preventing Line Breaks May want to keep a line of text all on one line, even if window is resized No break tag Text and graphics that appear within this tag will not be broken by the automatic wrapping function of the browser Forces users to utilize the horizontal scroll Preformatted Text Give character-by-character control over text alignment Displays in Courier font Honors blank character spaces

The Division Tag … Used to identify a generic block element Can contain multiple text elements such as headlines or paragraphs Applies to all style attributes within the container tags Useful in style sheets Can save you having to put align attributes in every tag on the page Headline Paragraph content… Another paragraph… Yet another paragraph… Blockquotes and lists can be realigned when placed within a

Special Characters Character entity name a string of text that identifies a specific character Name or numeric value CharacterDescriptionNameNumber Character space (nonbreaking space)   ©Copyright©© ®Registered trademark®® ™Trademark™™ £Pound£&#163 ¥Yen¥&#165 “Left curly quotesNone“ “Right curly quotesNone” >Greater-than symbolNone› <Less-than symbolNone‹

Let’s Try It Complete Exercise 7-6 Format Your Resume

Test Yourself In HTML, there is often more than one way to achieve a particular effect. Two of the code examples listed below will center the recipe title and comments as shown in packet (Figure 7-34); the other two will not. Which two code examples will NOT work? What is wrong with them? 1. Tapenade (Olive Spread) This is really a simple dish to prepare and it’s always a huge hit at parties. 2. Tapenade (Olive Spread) This is really a simple dish to prepare and it’s always a huge hit at parties. 3. Tapenade (Olive Spread) This is really a simple dish to prepare and it’s always a huge hit at parties. 4. Tapenade (Olive Spread) This is really a simple dish to prepare and it’s always a huge hit at parties.