Saturn
HTML Basics

HOME

How do I add content to my HTML file?

Once you have created the main structural elements of your HTML document, you can begin adding content to your page. The main content of your document of your HTML file is located within the body tags. Although there are many tags that may be used to format your document, this tutorial will focus only on the basics. After mastering the basics, you can browse through the reference section of this site in order to find more tags you may use. Some of the basic tags covered will include hyperlinks, images, paragraphs, and line breaks.

Hyperlinks allow you to link the current page to other pages. This allows users to move quickly and easily through your web site, and is a fundamental characteristic of the World Wide Web. To add a hyperlink you would use the anchor tag.

<a href="page_to_link_to.html">Linked Text</a>

In this example, the user would see the words "Linked Text" colored and underlined, and if they were to click on the highlighted text they would move to the HTML document named "page_to_link_to.html".

<a href="http://www.microsoft.com">Microsoft Site</a>
<a href="../page/home.html">Home Page</a>

These two examples show other ways to navigate to other directories within HTML files. The top example links to an absolute URL, while the second refers to a local HTML file. In the second example, you may have noticed the two periods (..) preceding the rest of the address. This represents moving up one directory from the current directory before continuing with the rest of the specified address.

Images add interest and variety to a web site, and are easy to add with a simple HTML tag.

<img src="image.gif">

You may have noticed that the image tag does not have a matching "/img" tag to end it. This is because some tags do not appear in pairs. In this example, the image displayed is named "image.gif". Currently, the two different types of image files commonly used are GIF files, and JPEG files. Often images are used as links to other pages. To accomplish this, simply place the image tag within the anchor tag instead of text.

One tag commonly used to separate text is the paragraph tag.

<p align="center"></p>

All text placed within the paragraph tag pair is placed in a separate paragraph. The word "align" in this example is commonly called a parameter. Most parameters may be omitted if desired, for example you could completely omit ‘align="center"’ if you did not want to align the text. Parameters can accept different values, in this example left or right may replace the value center. One important fact to remember is that text in a web browser is word wrapped. This means that you are not required to add line breaks to your HTML file to prevent it from running off the screen, when the text reaches the end of the line it is automatically moved down to the next line.

When you use a paragraph to separate text a space is created between paragraphs, however, this effect is not always desired. If you would simply like to add a simple carriage return at the end of a line, you can use the line break tag.

<br>

The line break tag is another simple example of an HTML tag that does not require a matching pair.

Copyright 1997 Web Developer's Workshop