1 / 32

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 <font> tag

vivien-kidd
Download Presentation

Formatting Text with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Formatting Text with HTML

  2. 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 <font> tag • Align text on the page with HTML • Using special characters

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

  4. “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”

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

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

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

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

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

  10. 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 <p> tag of the last line of text • Save it as headings.html and view the page in the browser.

  11. Let’s Try It • Complete Exercise 7-2 handout

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

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

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

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

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

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

  18. Let’s Try It • Complete exercise 7-3

  19. 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 • <i>…</i> or <em>…</em> italics text • <b>…</b> or <strong>…</strong> bold text • <tt>…</tt> typewriter text • <u>…</u> underlined text • <s>…</s> or <strike>…</strike> strikethrough text • <sub> … </sub> subscript • <sup>…</sup> superscript • Combining Styles • Able to apply several styles to the same piece of text by wrapping one set of style tags around another • <i><b>Caution!</b></i>

  20. Let’s Try It • Complete Exercise 7-4

  21. The <font> Tag • <font> tag • Inline style tag that uses attributes to control the typeface, size and color of text. • Uses attributes • Controlling font size • <font size=“number”>…</font> • 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

  22. The <font> 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

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

  24. The <font> Tag • Combining Styles • You can put many attributes within a single opener tag • Order doesn’t matter • <font size=“+2” face=“Helvetica” color=“teal”>…</font> • Can be nested with other inline styles • <b><i><font color=“red” size=“6”>CAUTION!</font></i></b>

  25. Let’s Try It • Complete Exercise 7-5

  26. Aligning Text • Left and Right alignment • <p> • Default alignment is left • <p align=“right”> or <h# align=“right”> • Sets alignment to the right margin • Works in both paragraph tags and heading tags • <p align=“center”> or <h# align=“center”> • Sets alignment center to the margins • <center>…</center> • Center whole page

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

  28. 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 <nobr> • 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

  29. 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> <p>Paragraph content…</p> <p>Another paragraph…</p> <p>Yet another paragraph…</p> </div> • Blockquotes and lists can be realigned when placed within a <div>

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

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

  32. 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? • <p align=“center”><font size=“+2” face=“verdana, sans-serif” color=“#663399”>Tapenade (Olive Spread)</font></p> <p align=“center”><i>This is really a simple dish to prepare and it’s always a huge hit at parties.</i></p> • <align=“center”> <p><font size=“+2” face=“verdana, sans-serif” color=“#663399”> Tapenade (Olive Spread)</font></p> <p><i>This is really a simple dish to prepare and it’s always a huge hit at parties.</i></p> 3. <div align=“right”> <p><font size=“+2” face=“verdana, sans-serif” color=“#663399”>Tapenade (Olive Spread)</font></p> <p><i>This is really a simple dish to prepare and it’s always a huge hit at parties.</i></p> </div> 4. <center> <p><font size=“+2” face=“verdana, sans-serif” color=“#663399”>Tapenade (Olive Spread)</font></p> <p><i>This is really a simple dish to prepare and it’s always a huge hit at parties.</i></p> </center>

More Related