Our Media Services Logo





Basic HTML
Basic HTML

Topics Covered

Select a specific topic from the items below. You can also navigate by clicking the forward and backward arrows at the bottom of this page.

HTML TAG: <HTML> </HTML>

Every HTML document should have a beginning <HTML> and an ending tag </HTML>. Your document should begin with <HTML> and the last tag of your document should be </HTML>.
[UP]

BODY TAG: <BODY> </BODY>

The Body tag is placed around the contents of your document. It can be used to set the text color, background color and patterns. Each is discussed below. The beginning body tag <BODY> should be placed at the top of your document after the <HTML> tag. The ending Body tag </BODY> is placed at the end of your document before the ending </HTML>tag.

For example, <BODY bgColor="white"> sets the background color of a document to the color white. This is placed at the beginning of your document. After you have entered the contents of the document, you would then add the </BODY> ending tag.

BODY Text Color

To change the text color for an entire web page, specify the <BODY text="#Color Code"> tag at the beginning of your HTML document. This sets the text color for the entire document. For example, if you want to set the text color to red, you enter the following tag at the top of your document:

<BODY text="#FF0000"> or <BODY text="red">

BODY Background Colors

To change the background color for an entire web page, specify the <BODY bgColor="Color code"> tag at the beginning of your HTML document. This sets the background color for the entire document. For example, if you want to set the background color to white, enter the following:

<BODY bgColor="FFFFFF"> or <BODY bgColor="White">

Here is an example of the color tag which will change a document's background color to blue.

<body bgColor="#0033CC">

Click Here to see what it looks like.

For more information on color codes, see the RGB Color Combinations section.

BODY Background Patterns

HTML enables you to change a background pattern using an image file. An image is a separate file that you bring into your web browser. For the web browser to display this image, it must be in .GIF or .JPEG file format. You scan or create an image using software such as "Adobe Photoshop" or download an image from the WWW. The image is saved in FileName.GIF or FileName.JPEG file format. You put the image into the same directory/folder as the HTML document which calls it. In the HTML document, you need to enter the appropriate BODY tag to call the image. To set the background pattern for a web page, specify the <BODY background ="fileName.gif"> tag at the beginning of your HTML document. Click here to see a page that uses a blue "cloud background" pattern which is actually an image file.

You can find additional patterns by clicking the "See Patterns" below. This will take you to a site where many patterns are available for you to use.

See Patterns
[UP]

Title: <title> </title>

Every HTML document should have a title. A title is generally displayed separately from the document -- usually at the top of the browser window. The title contains the document name. When a document is bookmarked, the title displays in someone's bookmark list. For this reason, titles should be descriptive. To set a title, use the <title> </title> tag. The "Tutorial" title in the figure below, for example, was obtained by typing the following:

<title> Tutorial</title>

Exercise:

  1. Create a new file in your word processor (e.g., MS Word, Word Pad, Simple Text)
  2. Type the following:

      <HTML>
      <BODY bgColor="FFFFFF" text="0000FF" >
      <title>My First Home Page</title>
      This is my first home page!!!
      </BODY>
      </HTML>

  3. Save the file as ASCII or text only format (Click File and then select Save as...) Save the file name with the .htm or .html extension (e.g., MyFile.htm)
  4. Open your WWW browser (e.g., Netscape)
  5. From the WWW browser, open the file you just created. (If you are using Netscape, select "Open File" or "Open Page" under the "File" menu and locate the HTML file on your hard drive. The procedure is similar for Internet Explorer.
  6. You should see your title at the top center of your screen. The page should be white and the text blue.
[UP]

Headers: <h1-6> </h1-6>

Headers are large bold text which appear at the top of your document or at major headings/sections within the document. The word "Headers" which appears above this paragraph is a Header. HTML has six levels of headers, numbered 1 through 6. To set a header, use the <h1-6> </h1-6> tag where choosing a number from 1-6 determines its size. The "Headers" header at the beginning of this paragraph, for example, was obtained by typing the following:

<h2>Headers</h2>

We could make the header smaller by changing the number 2 to a 4 as in <h4>Headings</h4> and the result would be a smaller size. As you increase the number that corresponds to the header, the size of the header decreases.

Exercise:

  1. Open your existing text file --the one you created for the Title exercise.
  2. Type the following: <h4>The Topic of My First Home Page</h4>
  3. Save the file (remember as "Text only")
  4. Open your WWW browser (e.g., Netscape)
  5. From the WWW browser, open the file.
  6. You should see your header at the top left of your screen.

[UP]

Paragraphs: <P>
Before you start to type a paragraph, it is important to know the difference between an HTML document and a word processing document. Unlike documents typed in a word processor, carriage returns in HTML files aren't recognized when the document is viewed in a Web browser. For example, let's say you are creating an HTML document in WordPerfect and reach the end of a paragraph. When you press the carriage return, the cursor drops to the next line. If you press the carriage return again, it places a blank line which separates the previous paragraph from the new one you are about to type. However, if you viewed this document in a Web browser, the carriage return is not present and the paragraphs will run together. To separate paragraphs, use the <P> tag. <P> does not need an ending tag. Without the <P> tag, the document becomes one large paragraph. You place this tag anywhere you want a new paragraph to be located. For an example, view the paragraph below starting with "Course Requirements:" and ending with "...Technologies of Instruction." The <P> tag is placed after the word "Requirements:" and thus the sentence starting with "Students successfully..." is dropped below "Course Requirements:" and a blank line appears.
Course Requirements:

Students successfully completing this course will: read Chapters 13, 5-10, and 12-14 in Instructional Media and the New Technologies of Instruction.

Now here is the text shown with the HTML tag:
Course Requirements: <P>

Students successfully completing this course will: read Chapters 5-10, and 12-14 in Instructional Media and the New Technologies of Instruction.

[UP]

Breaks: <Br>

When you create an HTML document you can also use hard return or break <BR> to break lines. Like the Paragraph tag, <Br> does not need an ending tag. The difference between <P> and <Br> is that <P> produces a wider space between lines. The example below illustrates the difference between the Break <Br> and the Paragraph <P> tags. As shown below, the only difference is that there is no space between the words "Course Requirements:" and the text below them.
Break Example

Course Requirements: <Br>
Students successfully completing this course will: read Chapters 13, 5-10, and 12-14 in Instructional Media and the New Technologies of Instruction.

Paragraph Example:

Course Requirements: <P>

Students successfully completing this course will: read Chapters 13, 5-10, and 12-14 in Instructional Media and the New Technologies of Instruction.

Exercise:
  1. Open your existing HTML file
  2. Type two paragraphs of text and after the last line of the first paragraph put the <P> tag.
  3. Save the file
  4. Open your WWW browser (e.g., Netscape)
  5. From the WWW browser, open the file.
  6. You should see a blank space between the paragraphs.
  7. Repeat this procedure with the <Br> tag

[UP]

Lines or Horizontal Rules <HR> tag:

The <HR> tag creates a horizontal line across the Web page. The <HR> tag needs no ending tag. You can vary a line thickness and width by adding attributes to the tag. For example, <HR size=4 Width=30%> creates a thick line that covers 30% of the browser's width.

Exercise:

  1. Open your existing HTML file
  2. Type the <HR> tag. Type the tag with defined attributes: <HR size=4 Width=30%>
  3. Save the file ("Text only")
  4. Open your WWW browser (e.g., Netscape)
  5. From the WWW browser, open the file.
  6. You should see two lines across the Web page.
[UP]

Font: <Font size = 1-7> </Font>

The Font tag enables you to set the size of text in your Web document. If you do not specify a size, text will automatically default to size 12. To set the text size, use the <Font size = 1-7> </Font> tag where the numbers between 1 and 7 correspond to different text sizes. Any text between the two tags is set to the font size you specify. The following are various text size examples:

This text has a font size of 5 applied to it.

This text has no font size applied to it.

The following are examples of how to set various text sizes:

<Font size = 5>This text has a font size of 5.</Font>

<Font size = 4>This text has a font size of 4.</Font>

<Font size = 3>This text has a font size of 3.</Font>

<Font size = 2>This text has a font size of 2.</Font>

Let's say that you wanted one word in a particular sentence to have a different font size than all other words. Like this sentence:
The computer is not working!

The HTML needed to do this is shown below.

The computer <Font size = 6> is not </Font> working!

Notice that only the words contained within the <Font size = 6> </Font> tags are changed to font size 6. Therefore, the text you want to resize must always be within the <Font size = 6> </Font> tags.

Exercise:

  1. Open your existing HTML file
  2. Type the following:

    <Font size = 5>Type what every you want here.</Font>

    <Font size = 4>Type what every you want here.</Font>

    <Font size = 3>Type what every you want here.</Font>

    <Font size = 2>Type what every you want here.</Font>

  3. Save the file
  4. Open your WWW browser (e.g., Netscape)
  5. From the WWW browser, open the file.
  6. You should see the various text sizes.
[UP]

Changing Font C o l o r: <font color="#Color Code"> </font>

To change text color for specific words and sentences, specify the <font color="#Color Code"> </font> tags. Position the text to be changed between the beginning <font color="#Color Code"> and the ending </font> tags. For example, if you want to set the text color of a particular word to the color red, do the following:

This is a sentence which has a <font color="#FF0000"> red </font> word in it.
[UP]

Font Face: <FONT FACE ="FontFace Name"> </font>

The FACE attribute sets the font parameters for your html document. It sets the font style of text that displays on the user's computer. You can specify additional/optional font styles in case the chosen font is not available on the user's computer. If none of the fonts are available, the system will use the defaults. To change the font face for an entire web page, specify the <FONT FACE ="Arial, Geneva, Lucida Sans"> tag just below your beginning BODY tag. Using the font face tag specified below, the text displayed will be Arial, Geneva, or Lucida Sans depending on your platform and which fonts you have installed on your system.

<FONT FACE ="Arial, Geneva, Lucida Sans">

To change the font face for specific words or sentences, specify the <FONT FACE ="FontFace Name"> </font> tag. Position the text to be changed between the beginning <FONT FACE ="FontFace Name"> and the ending </font> tags. For example, if you want to set the font face of a particular sentence to Arial, do the following:

<FONT FACE ="Arial">This sentence is set to an Arial Font Face.</font>

Exercise

  1. Open an html document in your word processor.
  2. Enter the font face tag: <FONT FACE ="Arial"> just below your beginning BODY tag.
  3. Type the following: <font color="#FF0000"> This sentence should appear in red.</font>.
  4. Save the document ("Text only").
  5. View the document in your web browser. The font face should be set to Arial and you should see a sentence in the color red.
[UP]

RGB Color Combination Codes:

The RGB (Red, Green, Blue color combination) codes for some common colors are:
White "FFFFFF"
Black "000000"
Purple "FF00FF"
Yellow "FFFF00"
Gray "C0C0C0"
Red "FF0000"
Blue "0000FF"
Green "00FF00"
Besides using RBG values to specify a color, you can also write the name of the color. For example, to make the font color white, type . However, only Netscape 3.0 and above or Internet Explorer 3.0 and above will be able to see the color.

You can see many more different color codes by going to:

  • ColorMaker
  • Color Chart.
    • [UP]

    Images

    Getting Image Files for your web pages

    Linking to Images

    [UP]

    You have completed the section in our HTML tutorial called Basic HTML. To continue, click on the forward arrow below. Click "menu" to return to the HTML topics menu.