Special Characters using Text Edit

    ●   Learn Character Formatting Elements like bold and italics

    ●   Learn about Horizontal Lines

    ●   Learn about Special Characters like: ♥, →, and ©.

Learn About:

Bold Text Horizontal Lines
<background-color> Line Breaks


  •   This tutorial is for the Fan-Tastic Project and is part of a series:

1 - First Web Page   2 - index Page   3 - Special Characters   4 - Ordered Lists   5 - Links   6 - Horizontal Nav

Step #1: Open your index page ~

Last time you worked on the title of your index page.

Open that index.htm document in your preferred text editor …

Open your index.htm document in your text editor and insert <!-- today's date --> between the invisible comment tags.

Step #2: Bold and Italics ~

Use character formatting elements like bold and italics wherever you need it.

Use the <b> code to make letters bold:

<p>Welcome to our <b>Math Classes</b></p> =

Welcome to our Math Classes

Use the <i> tag to make italic text:

<p>Welcome to our <i>Math Classes</i></p> =

Welcome to our Math Classes

Use both to make text bold and italicized:

<p>Welcome to our <i><b>Math Classes</b></i></p> =

Welcome to our Math Classes

Use a combination of the <b> and <i> tags to create BOLD and/or italic text where you need it.

Step #3: Inserting Horizontal Lines ~

It's nice to have a horizontal line under your text or anywhere you might need it, and the rubric requires that you put one somewhere.

Use a one-sided tag to create a horizontal line: <hr /> wherever you think it might look good.

Save your work and look at your horizontal line in a browser …

Step #4: Horizontal Line Width and Height ~

Change the line's width by typing the following:

This example is 65 % the width of your web page, but you can set any width you like …

Change the height of the line like this:

The height and width value is measured in Pixels - abbreviated px. A pixel is a dot on your computer screen that is very tiny.

Step #5: Color ~

Change the color of the line like this:

The codes look something like this …

Welcome to the wonderful world of web page design …

Also put a <hr/> tag at the bottom of your page above the </body> tag.

Step #6: Empty Elements & Special Characters ~

One important element you want to use is the <br /> tag - it creates a line break and starts a new line within a paragraph.

… creates 3 consecutive line breaks.





Use the <br /> tag to break up your text
and anything else in your HTML documents …


Step #7: Copyright and Other Special Characters ~

The rubric requires some kind of special character used in your pages - for instance a copyright symbol © to show that the content is copyrighted …

… or the code for a bullet • is &bull;

… or the code for a ♥ is &hearts;

… or the code for → is &rarr;

The HTML code for © is &#169; and usually goes at the bottom of the page somewhere -

Here is a list of other special characters you can try.

Last Step: Save and Attach ~

Save your index.htm file IN THE ROOT FOLDER OF YOUR PROJECT, attach it to the tutorial, and keep working …