Lesson 3: Formatting Your Page
  1. The Background Color Attribute
  2. The Align Attribute
  3. The Center Container
  4. The Break Tag
  1. The No Break Container
  2. The Horizontal Rule Tag
  3. The Unordered List Containers
  4. The Space Command

The Background Color Attribute (BGCOLOR=". . .")

Background colors can enhance the appearance of your resume. To add a background color to an HTML page, add the BGCOLOR attribute to the <BODY> tag. Specify your background color by using HTML standard color names (red, blue etc. ) or by using HTML hexadecimal numbers (Example: #FFFFFF, stands for white). Refer to the glossary for a complete listing of hexadecimal numbers and standard color names. Always specify a standard color name or a hexadecimal number when coding background colors.

Example:

NOTE: Remember to use background colors that contrast well with your text.

Top of Page


The Align Attribute (ALIGN=". . .")

You can use the ALIGN attribute to specify the alignment of headings, paragraphs and various other HTML page elements on your resume. The ALIGN attribute allows you to position HTML page elements to the left (default position), to the center, or to the right.

Syntax
Result
Headings: Align Attribute
  • <H1 ALIGN="LEFT">Hello</H1>
  • <H2 ALIGN="CENTER">Hello</H2>
  • <H3 ALIGN="RIGHT">Hello</H3>

Hello

Hello

Hello

Syntax
Result

Paragraphs: Align Attribute
  • <P ALIGN="LEFT">My name is. . .</P>
  • <P ALIGN="CENTER">My name is. . .</P>
  • <P ALIGN="RIGHT">My name is. . .</P>

My name is. . .

My name is. . .

My name is. .

Top of Page


The Center Container (<CENTER>. . .</CENTER>)

Although the CENTER container is deprecated, browsers still recognize it. You can use the CENTER container to center any HTML page element. To use the CENTER container simply enclose your text, or any other page element, within the CENTER container.


Syntax
Result
The Center Container
  • <CENTER>Hello</CENTER>
Hello

Top of Page


The Break Tag (<BR>)

To prevent your text from running together in your resume, you must insert line breaks after text that is not nested within paragraph, heading, or list containers We'll learn about list containers later. For now, just remember that headings, list containers and paragraphs automatically create line breaks.

The BR tag is an empty tag that begins a new line of text. The tag's "BR" stands for break. The BR tag performs the same function as the ENTER key in a word processor. Therefore, pressing the ENTER key to move to a new line won't work when composing HTML documents.

Example:

If you type:

Objective (Press "Enter")

My objective is to. . .

Your HTML document will display in your browser:

ObjectiveMy objective is to. . .

Inserting a <BR> tag after "Objective" will put "My objective is to," on a separate line.

Top of Page


The NOBR Container (<NOBR>. . .</NOBR>)

The NOBR container creates an unbroken line of text. The container's "NOBR" stands for no break. If text exceeds the maximum width of the screen, browsers automatically wrap the text. The NOBR container will prevent an automatic text wrap and will require the user to scroll to the right to see the end of the unbroken line of text. You can use this container in your resume to keep important text on the same line.

Example:

The No Break Container
Syntax
Result
  • <NOBR>HTML is fun</NOBR
HTML is fun.

Top of Page


The Horizontal Rule Tag (<HR>)

The<HR> tag is an empty tag that inserts a horizontal line between HTML elements.. The tag's "HR" stands for horizontal rule. Horizontal rules are great for dividing HTML pages into sections. You can use horizontal rules to separate the heading portion of your resume from the body. Click the examples below to see how horizontal rules can enhance your resume's appearance and organization.

You can adjust the appearance of horizontal rules by adding the following attributes to the <HR> tag:

  • Width: This attribute determines the length of your line. You can specify the width by using percentages (this is the preferred method because it will look the same on any screen resolution) or by using pixels. When using percentages, specify a percentage between 1-100%. The number you specify will compose a percentage of your screen's width.

    Example: If you write <HR WIDTH="50%">, the horizontal rule will compose 50% of your screen's width and will resemble the line below:


  • Size: This attribute specifies the thickness of your horizontal rule. Specify the size by using pixels (usually between 1-10 pixels is sufficient).

    Example: If you write <HR WIDTH="50%" SIZE="6" >, your horizontal rule's size will resemble the line below:


Pixels are tiny dots that compose your computer screen. Their size is usually the same as one point on a 75 dot per inch screen. In Internet Explorer, the default size of a horizontal rule is 2 pixels; Netscape's default is 3. Experiment with different sizes to achieve the look you want, but beware that your horizontal rules will look different on different screen resolutions.

  • Align: This attribute positions your horizontal to the left (default alignment), to the center, or to the right of a page.

    Example: If you write <HR WIDTH="40% " SIZE="6" ALIGN="CENTER">, your horizontal rule's alignment will resemble the line below:


  • Noshade: By default, many browsers add shading to horizontal rules. To make a horizontal rule a solid color, add the noshade attribute.

    Example: If you write, <HR WIDTH="40% " SIZE="6" ALIGN="CENTER" NOSHADE>, your horizontal rule's shading will resemble the line below:


Top of Page


The Unordered List Containers (<UL><LI>. . .</LI></UL>)

An unordered list is simply a bulleted list. You can easily organize your work experiences into bulleted lists by using unordered list containers.

  • Click here to see how you can use lists on your resume. Select VIEW SOURCE to see the code.

An unordered list structure consists of two container elements:

  • <UL></UL>: the opening and the closing tags necessary to create an unordered list. The container's "UL" stands for unoredered list. List item tags are placed between <UL></UL> tags.
  • <LI></LI>: the opening and the closing tags for the list item container. The container's "LI" stands for list item. Each list item you specify will go between the <LI></LI> tags as illustrated below.
    Syntax
    Result

    Unordered List
    • <UL>

    <LI>Job Experience </LI>

    <LI>Job Experience </LI>

    <LI>Job Experience </LI>

    </UL>

    • Job Experience
    • Job Experience
    • Job Experience

By default, unordered lists use disc shaped bullets (as the picture displays above). However, you can modify the appearance of your bullets by adding the TYPE or the STYLE attributes to the <UL> tag. Bullets can either have a circle, a square, or a disc shape.

  • Type: The TYPE attribute is a deprecated tag; but, browsers still recognize this attribute.
Syntax
Result
Unordered List: Type Attribute
  • <UL TYPE="SQUARE">

    <LI>Job Experience </LI>

    <LI>Job Experience </LI>

    <LI>Job Experience </LI>

    </UL>

  • Job Experience
  • Job Experience
  • Job Experience
  • Style: The STYLE attribute is a recent attribute used in many HTML tags and containers. You can also use this attribute to modify the appearance of bullets.
Syntax
Result
Unordered List: Style Attribute
  • <UL STYLE="LIST-STYLE-TYPE=CIRCLE">

    <LI>Job Experience </LI>

    <LI>Job Experience </LI>

    <LI>Job Experience </LI>

    </UL>

  • Job Experience
  • Job Experience
  • Job Experience

NOTE: The unordered list STYLE attribute may not work in less recent versions of Netscape and Internet Explorer.

Top of Page


The Space Command (&NBSP)

The &NBSP command allows you to add extra spacing between your text. You can use the &NBSP command to add spacing between your job titles and your jobs' beginning and ending dates on your resume.

  • Click here to see how you can use the &NBSP command on your resume.

By default, browsers only display one space between text. So even if you type more than one space between your text, browsers will only show one space between your text.

Example:

I like (press space bar three times) HTML.

Displays:

I like HTML.

To add extra space between your text, simply add the &NBSP where you desire extra space between your text. You may have to use many &NBSP commands to achieve the look you want.

Example:

I like &NBSP &NBSP&NBSP&NBSP&NBSP&NBSP&NBSP&NBSP&NBSP HTML

Displays:

I like           HTML

Top of Page


Previous
Next

 

| Home | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | FAQS |