TEC home

Web home

Page/site design
- basic principles
- good/bad examples

Basic html
- tutorial
- resources

Netscape Composer
- tutorial
- resources

Dreamweaver
- tutorial
- resources

Uploading and downloading
- setting up your mason account
- basic procedure

Web assignments
- general
- design and navigation

Contact us

HTML Tutorial - Formating Text

In this tutorial you will learn how to write basic html code in order to format text on a basic web page. Note that the actual html tags are in <arrow> brackets and the explanations of the tags are in [square] brackets.

For this part of the tutorial, follow the directions in a linear fashion. Open a text file and type in (or copy/paste) the codes as you read through. Follow the directions at the end for saving and viewing the page.

    1. Open a word document to begin creating an <html> web page file.

    2. The logic of html documents is open/close. When you open a code <b> you generally have to close it </b> (though there are of course certain exceptions) by adding a forward slash before the code you want to close. Every page must start with opening <html>.

    <html>

      [The html code opens the html document.]

    <head><title> insert project name: your name, and/or the specific page name </title></head>

      [The title code puts the title across the top of the browser, not your page.]

    <body bgcolor="#ffffff" text="#000000" link="#3333ff" vlink="#ff3333">

      [The body code opens the body of your document and allows you to designate background, text, and link colors. Nothing shows up on the page unless you open the body. Color codes must have six digits, be preceded by #, and be in quotes. See Colors by Hue for a basic list of color codes. Basic color names like white, black, blue, red, etc. can also be used instead of the number codes, but the choices are limited. (The above number codes are for white, black, blue, and red.) The link code designates the initial color of a link on your page to distinguish it from the color of your text. The vlink code designates the color of a link already visited to distinguish it from pages you've already seen.]

    <center>

      [The center code centers all text after the code until you close it.]

    <font size="+2"><b> insert title/headline to be seen on the page here </b></font>

      [The font code allows you to designate the font size of inserted text and the b code bolds it. You can use a plus or minus to make the text larger or smaller. Note that these codes should be closed directly after the text they apply to.]

    <br>
    <br>

      [The br code adds a line break, or a full space if used twice, or more if used repeatedly.]

    <font size="+1" color="#993399"> <i> insert a subtitle or the author's name to be seen on the page here </i> </font>

      [The font code also allows you to designate font color and the i creates italics.]

    </center>

      [Closing the center code keeps everything after this from being centered.]

    <br>
    <hr>

      [The hr code creates a hard return--makes a visible line break across the page.]

    <p> insert 1st paragraph of text </p>
    <p> insert 2nd paragraph of text </p>

      [The p code automatically spaces paragraphs. Repeat for as many paragraphs as you need.]

    <blockquote> insert quote </blockquote>

      [The blockquote code indents the text you put in it, creating automatic block quotes.]

    <ul>
    <li> insert text to be seen on the page here
    <li> insert text to be seen on the page here
    <li> insert text to be seen on the page here
    </ul>

      [The ul code creates an unnumbered list. The li command designites a line and puts a bullet in front of the following text.]

    </body>

      [After you've coded the initial text you have to close the body or the text won't show up.]

    </html>

      [Though some browsers will read the page with just the body closed, it is still important to close html as well. Without closing html some browsers won't recognize the page or won't recognize some of the other codes.]

    3. Once you have done the initial coding, save your new file. Every page name must end with .html so the browser (Netscape/Explorer) can view it. Be sure to save it as TEXT ONLY w/ Line Breaks--go down to file type when you save it and select TEXT ONLY w/ Line Breaks and make sure .html is at the end of your filename. (With Windows XP you save as TEXT ONLY then select line breaks from a dialog box.) This is the only way it will work. Save the document to the desktop folder, the C-drive, or to an external disc.

    4. Once you've saved it, you can click on it and it will open in a browser. Look it over and start revising it. To revise, close Word and open up the file in Wordpad to make any changes. (If you try to open it again in Word, Word will read it as a web page not a text file. In other words, it won't let you revise it.) Always save changes or the browser won't recognize them. After saving changes, go back to the browser and hit reload/refresh to view the changes. Once done, save file to your disc, upload to your web space, or email the file to yourself.

These are the most basic codes/tags for formating text. See additional codes for a few more that will give you some more control over your text and page layout. For more advanced page layout see Tables.


last update: 15 October 2002
HTML Home | Text | Links | Images | Tables