Formatting Text with HTML

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 <h#>……</h#> • Quotations <blockquote>……</blockquote> • Preformatted text <pre>…….</pre>

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 <h#>…</h#> • Six levels of headings • <h1> to <h6> • Headings are displayed in bold text • <h1> displays in the largest heading size

Building Blocks • Long Quotations <blockquote>…</blockquote> • Use for long quotations • Displayed with indented left and right margins • Adds extra space above and below • Preformatted Text <pre>…</pre> • Displays in the browser’s constant-width font with extra space added above and below • Text between <pre> 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 <h#> 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 <ol>…</ol> • 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 • <ol> container tag identifies the entire list as “ordered” • Each item within the list has a <li>…</li> (list item) tag.

Lists • Ordered Lists <ol>…</ol> • Change the style of numbering with type attribute • 5 possible values • 1 (numbers) • <ol type=“1”> • A (uppercase letters) • <ol type=“A”> • a (lowercase letters) • <ol type=“a”> • I (uppercase roman numerals) • <ol type=“I”> • i (lowercase roman numerals) • <ol type=“i”> • Use the start attribute to specify a starting number other than 1 • <ol start=“17”> or <ol start=“j”> • Able to combine start and type attributes in one tag • <ol type=“A” start=“K”>

Lists • Unordered Lists <ul>….</ul> • Bulleted lists • Each item within the list is specified with <li>…</li> (list item) tags • Change the style of bullets with type attributes • Disc • <ul type=“disc”> • Circle • <ul type=“circle”> • Square • <ul type=“square”>

Lists • Definition Lists <dl>…</dl> • Used for displaying lists of words with blocks of descriptive texts • <dl>…</dl> tags are used to mark the beginning and end of the entire list • Each word (term) is marked with the <dt> tag • Displayed against the left margin with no extra space above or below • Each definition is marked with a <dd> 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 • <tt>…</tt> typewriter text • … underlined text • <s>…</s> or <strike>…</strike> 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 • <basefont size=“number”> • <basefont> tag sets the default size of text • When placed in the <head> tags of the document, the <basefont> 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 <h# align=“right”> • Sets alignment to the right margin • Works in both paragraph tags and heading tags • or <h# align=“center”> • Sets alignment center to the margins • <center>…</center> • Center whole page

Aligning Text • Indents • There is no indent function in standard HTML • Use the following to indent text: • <blockquote> tag to produce an indent on both the left and right margins • <ul>…</ul> with no list items to display text as indented • <dl>…</dl> with only definitions (<dd>) 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 <pre> • Displays in Courier font • Honors blank character spaces

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

Special Characters • Character entity name • a string of text that identifies a specific character • Name or numeric value

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? • Tapenade (Olive Spread) This is really a simple dish to prepare and it’s always a huge hit at parties. • <align=“center”> Tapenade (Olive Spread) This is really a simple dish to prepare and it’s always a huge hit at parties. 3. <div align=“right”> Tapenade (Olive Spread) This is really a simple dish to prepare and it’s always a huge hit at parties. </div> 4. <center> Tapenade (Olive Spread) This is really a simple dish to prepare and it’s always a huge hit at parties. </center>

Formatting Text with HTML