HTML Basics:
 Format Text

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

Browsers come with default settings for normal text and for headings. But you will certainly want to modify these from time to time.

Unfortunately, with basic HTML you must make the changes to each spot yourself. For example, there is no way to change all H2 headings to a different font and style at once unless you advance to using stylesheets.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/FPX To subtopics
    Images in HTMLTo subtopics
    FormattingArrow - Subtopic open
        Page Format
    icon-footprintPage Colors Table: Named Colors
    icon-footprintBackground Image
        Text Format
    icon-footprintFormat Text
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics



Not all alignment buttons are equal. The buttons Buttons: Alignment do not do the same thing all the time. It depends on what you are trying to align.

Selected: Click button: Adds:
Paragraph Buttons: Alignment ALIGN attribute to paragraph tag with value "left", "center" , or "right"
Image Button: Center align="center" to P tag
Button: Align Left or Button: Align Right align="left' or align="right" to IMG tag

WarningOnce an image has been aligned left or right, you must get the code changed to get it centered. You have to take out the alignment in the IMG tag. You can edit the HTML code yourself or use Picture Properties to remove the alignment. Another awkward 'feature'!

Icon Step-by-Step

Step-by-Step: Format Text

 Icon Step-by-Step

What you will learn:

to align text
to change color and font of text
to format headings
to change font size
to make text bold and italic
to insert a horizontal rule and format it

 Start with Class disk, hector 18.htm, resource files (FrontPage or FPX)

You will be making some changes to make Hector's page more appealing and colorful. By changing the title to use just the text graphic of Hector's signature, the top of the page will look cleaner. Then you will change the font face, size, and color of the headings.

  1. Remove title:
    the title Home page of Hector Chavez. Be careful not to include the anchor at the left for the image of Hector's signature.

    Text: Title selected (FrontPage)

    Text: Title of page selected (FPX)


  2. hector18.htm with title removedDelete.

    If the image of Hector's signature is gone, then you also selected the anchor mark at the beginning of the title line. In that case, click on the Undo button immediately and try again.

    Warning FPX does not keep a list of actions for you to undo. You can only undo the last action. FrontPage keeps a list of the last 30 actions.

  3. Class disk Save as hector19.htm.

Center Title Image

To align an image, you add some code to the <IMG> tag, either by clicking an alignment button or by typing in the appropriate code.

  1. With the cursor still on the title line, click on Button: Center the Center button. The cursor moves to the center, but the image remains at the right. Did you expect that? 

    Text: first line centered. Image at right

    Text: first line centered. Image at right


  2. Click on the image itself to select it and click on the Center button. Hmmm. Nothing changes. You can handle this problem yourself in the code window.
  3. Open the HTML View. The code window shows the following code for the signature image:

    <h1 align="center"><img src="hchavez-transparent.gif"
    align="right" hspace="0" width="210" height="43"

    Notice that the image has the attribute align set to right but the H1 heading has align="center". The image won this battle!

    Warning Once you have aligned an image, you cannot center the image by using the Center button. That button adds some code to the <P> tag instead of to the <IMG> tag. You must remove the align="right" or align="left" from the IMG tag by hand editing yourself or by opening Picture Properties and setting the alignment to None.

  4. hector18 with title image centered at lastSelect  align="right" and delete it from the IMG tag. This puts the alignment for the image back to the default. So now it will be the same as the paragraph.
  5. Click on OK. Finally,  the signature image is centered!
  6. Class diskSave. [hector19.htm]

Format Heading

Illustration of serifs on a capital MIt is a common design practice to use a sans-serif font for headings and a serif font for text. Arial is a sans-serif font because the letters do not have the little extra pieces like Times New Roman and Georgia, which are serif fonts.

The browser default style for an H2 heading is larger and bolder than regular text. You will make some more changes.

  1. Select the heading that is the second line:  My house is your house! 
  2. Click on Button: Center the Center button. The line is centered on the page.
  3. Dialog: Color - green selectedColor:  Click on Button: Color the Color button and then select the green color square.
  4. Click on OK. The text is now green. Since the text is still selected, you will see the reverse colors.
  5. Font Face:  Change the font to Tahoma by selecting it from the drop list of fonts.
    TipIf you open the font list by clicking the arrow and type a T in the Font box, the list will scroll to the first font with a name starting with T.
  6. Code:  Open the HTML view and look at the HTML code for line 2.

    <h2 align="center"><font color="#008040" face="Tahoma"> My house is your house!</font></h2>

  7. Edit the value for the attribute FACE in the <font> tag to include some other sans-serif fonts, in case Tahoma is not available. Spell carefully!

    face="Tahoma, Trebuchet MS, Arial, sans-serif"

  8. hector19 - with line 2 formatted green, Tahoma, centeredReturn to Normal view. You will not see a change in your page since your computer has the font Tahoma installed. It was on the list!
  9. Class diskSave. [hector19.htm]

Format Headings

Browsers  have default settings for the headings - H1, H2, H3, H4, H5, H6.  They are sized relative to the default browser text size. When you format the headings, these default sizes still apply.

  1. Heading "My Job" - formatted green TahomaSelect the first heading: My Job.
  2. Format the heading with the font Tahoma and the color green.
  3. View the HTML code for the heading.

    <h3><font color="#008040" face="Tahoma">My Job</font></h3>

    TipNotice the size of the heading. The browser displays <h2> headings at two sizes larger than the default text size and displays <h3>headings at one size up from the default.

  4. Return to Normal view.
  5. Repeat the steps above for the other H3 headings: My Education, My Family, My Hobbies, Comments and Suggestions
  6. Class diskSave. [hector19.htm]

Format Subheading: Font Size

The subheadings under My Hobbies are in term/definition form. The DT (definition term) tag has the same default size as normal text. To make it bigger than normal text, you must set the size.

  1. Text: format subheadingSelect the first Hobby - Travel.
  2. Change the font to Trebuchet MS
  3. Increase the size by clicking the button Button: Increase Font Size.
  4. Open the code window and look at the code for this line:

    <dt><font size="4" face="Trebuchet MS">Travel</font> </dt>

  5. Repeat the steps above for the other Hobbies: Fishing, Soccer, Cooking
    Icon: FrontPage
    In FrontPage you can use the Format Painter to do this easily. Select the formatted subheading Travel. Click on the Format Painter button and then drag over or double-click the word "Fishing". The same formatting is applied. Repeat for the other subheadings.
  6.  Class diskSave. [hector19.htm]

Bold and Italics

Icon: FPXIn FPX the buttons Button: Bold Bold and Button: Italics Italics apply the logical tags <strong> and <em> to the selected text instead of the character formatting tags <b> and <i>. Most browsers display <strong> text as bold and <em> as italic.

  1. Text: newletter title "Here and There"In the section My Job, select the name of the newsletter and click on Button: Bold the Bold button and then on Button: Italics the Italics button.
  2. In the section My Family, select the name Carla and click on Button: Bold the Bold button.
  3. Repeat for the names Ricardo and Rosa.
  4. Select the phrase in parentheses  (our soccer star!)  and click on Button: Italics the Italics button.
  5. Repeat for the phrase  (our ballerina) 

    Text: 'our ballerina' in italics

  6. Open the code window and look at the changes you just made.

    2nd paragraph under My Job:

    <p>I also write and edit our email newsletter <i><b>Here and There</b></i>, which keeps our customers informed about special deals and news in the travel industry. </p> <p>I also write and edit our email newsletter<em><strong>Here and There</strong></em>, which keeps our customers informed about special deals and news in the travel industry. </p>

    FrontPage uses B & I

    FPX uses STRONG & EM

    Notice how the tags are nested- closed in reverse order from how they were opened.

    Paragraph under My Family:

    <p>I married my wife <b>Carla</b> in 1986. We have two children - <b>Ricardo</b> who is 10 years old <i>(our soccer star!)</i> and <b>Rosa</b> who is 7 years old <i>(our ballerina)</i>.</p> <p>I married my wife <strong>Carla</strong> in 1986. We have two children - <strong>Ricardo</strong> who is 10 years old <em>(our soccer star!)</em> and <strong>Rosa</strong> who is 7 years old <em>(our ballerina)</em>.</p>



  7. Switch back to Normal view.
  8. Class diskSave. [hector19.htm]

Horizontal rule

The tag <hr> draws a line across the text area, called a horizontal rule. Such a line can help show what parts of your page belong together. Rules are often used to separate the title and the footer from the rest of the text and to separate logical sections.

You can choose the length, the height (that is, the thickness), and the color of the horizontal rule. Browsers besides Internet Explorer may just ignore these settings.

  1. Move your cursor to the end of the second line on the page.
  2. Menu: Insert | Horizontal LineFrom the menu select  Insert  |  Horizontal Line .

    A thin line appears across the page below the cursor location and moves the cursor to the beginning of what was line 3. The format of the line depends on the format of the last line that was inserted. The program remembers! This can be helpful... or a real pain!

    You cannot format the line from the menu. You can only get to the dialog from the popup menu for the line.

  3. Popup Menu: Horizontal Line PropertiesRight click on the line. From the popup menu select Horizontal Line Properties.
    If the line is very thin, you may have to try several times to click in the right spot.


    Dialog: Horizontal Line PropertiesThe dialog Horizontal Line Properties appears.


  4. Change the settings to:
    Height = 4 pixels
    Color = Navy.

  5. hector19.htm with horizontal rule below subheadingClick on OK.
  6. Repeat to add a horizontal rule between each section. For this Step-by-Step, be sure to move the cursor to the end of the text line above where you want the rule to appear.  You need to see what happens.

    hector19.htm - last horizontal rule does not go all the way across the pageThe last line (above Comments and Suggestions) does not go all the way to the left margin. Can you see why?


  7. Open the code window and scroll down to the last definition.

    <dd><img src="grill.gif" align="left" hspace="5" width="100"
    >Dad taught me early that if I could catch a
         fish, I could clean and cook it, too. After a few smoky
         experiences, I have gotten rather good at cooking fish on
         a grill. I fact, I will grill anything that is edible!<hr
         size="4" color="#000080">
        <p><br clear="left">

    The <hr> tag is inside the definition tags, so it uses the same margins and text wrapping. Logical, but not what we want!

    The break is also inside paragraph tags. Not necessary! This added extra white space that you do not need or want.

    You need to start over with this horizontal rule.

  8. Return to Normal view.
  9. Select the horizontal rule by clicking on it and then press the DELETE key.
  10. hector19.htm with last horizontal rule running all the way across the pagePut the cursor at the beginning of the line Comments and Suggestions:
  11. Insert a horizontal rule again. Aha! This time the line goes all the way across the text area.
  12. Class diskSave. [hector19.htm]
    Below is an image of what the whole page would look like if you could see it all at once.

    hector19.htm - finished

    hector19.htm as shown in FPX