So you want to publish your page on the Web. Well, you could use an authoring program such as Microsoft's Front Page or you could do it yourself. (Open a new document in WordPad or Notepad or any text editor, and name it index.html.) HTML (hypertext markup language) really isn't that hard to master. It is just a matter of learning a few basic commands so web browsers can "read" your document. HTML commands or "tags" tell browsers that the information on a specific page is to be displayed on the web, that the "body" of the page is to be displayed in a specific manner; whether a paragraph is indented, whether the text is boldfaced or italicized and allows you to place links and images in your document.
All HTML tags are placed between the "caret" symbols, "<" and ">", and all but a few require a beginning tag and an ending tag. For example, all documents begin with <HTML> and end with </HTML>. (Notice the "/". All ending tags begin with the "/".) <HTML> and </HTML> tags tell a browser that the information appearing between the tags is intended for the Web.
HTML documents are divided into two parts. The first part is the "head" and includes information about the document, particularly the "title" which will appear at the top of the browser window (this information helps you keep track of each page you visit on the web). The second part is the "body" which includes all the information appearing on the actual web page.
Basically, an "HTML" document meant for the web looks like this:

<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>
<BODY>
(The body of your text goes here)
</BODY>
</HTML>

Okay, let's work on the "body" part of the document. Let's start with a welcome message. Since the welcome should be larger than the rest of the text, we need to tell the browser. For this, "header" tags are used (<H1> and </H1> - notice that "header" tags require the "/" ending). A "header" tag allows you to change the size of the text from size 1 (being the largest) to size 6 (which is the smallest).
If we want to have the welcome message centered in the middle of the page, we need to use "formatting" tags. The <CENTER> and </CENTER> tags will place all information between them in the center of the page. (Again, the "center" tags require the "/" to end them.)
Other "formatting" tags are the "paragraph" tag (<p>) which adds a line space creating a new paragraph, and the "line break" tag (<br>) which creates a new line, but not a new paragraph. (The <p> and the <br> tags are one of the few tags which do not require the "/" to end them.)
Next, let's look at text formatting. For this we need to use the <FONT SIZE= > and the </FONT> tags. (Notice that "font" tags require the "/" to end them.) Font sizes range from 1 to 7 with 1 being the smallest and 7 being the largest. This tag allows you to tell the browser whether you want your text to be large or small. (If you do not specify a font size for your text, the default setting is 3).
Let's take a look at the "html" document with the new additions:

<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>
<BODY>
<CENTER> <H1>Welcome to my Home Page</H1>
<br>
<br>
<br>
<FONT SIZE=2>I Am still working on my page, so come back soon to see the improvements.</FONT> </CENTER>
</BODY>
</HTML>

Now, let's add an image and an e-mail link to the page. You've been surfing the web and have probably found some clip art you like, but for this tutorial, we will use my logo button. In order to add this image to the page, we need to use the <IMG SRC=" "> tag (this is another tag which does not require the "/" ending). To determine where the image will be on the page, we need to add the ALIGN=LEFT (or RIGHT, MIDDLE, TOP or BOTTOM) tag to the <IMG SRC=" "> command. (Before you can use an image in your web page, it must be uploaded to the same directory as your index.html file.) Keep in mind that file names are case-sensitive so be sure to type the exact name of your image file in your HTML document.
Next, we need to add the tag (<a href="http:// "> and </a>) for the hyperlink page. (The "url" of the page you want to link to goes after the "//".) Notice, again, that the hyperlink tag requires the "/a" to end it.) Okay, so we have a hyperlink, but we want to put in our e-mail address to get feedback from visitors to our page. The same hyperlink tag (<a href=" ">) is used, but instead of putting in a "url", you would put "mailto: and your e-mail address.
Finally, our completed web page document will look like this:

<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>
<BODY>
<CENTER> <H1>Welcome to my Home Page</H1>
<br>
<br>
<br>
<FONT SIZE=2>I am still working on my page, so come back soon to see the improvements.
<br>
<br>
In the meantime, visit <a href="http://www.spotlightondesign.com><IMG SRC="spotbut2.gif" BORDER="NO"></a> for all your web page design and graphic needs.
<br>
<br>
If you have any suggestions on how I can improve this page, please <a href="yourname @ your company">E-Mail Me! </a> </FONT> </CENTER>
</BODY>
</HTML>

To see how this page looks in the browser push this button.

When you are finished, hit the "back" button in the browser window to return to this page.

Home ~ Portfolio ~Fees
Graphics ~ Tutorials ~ Links ~ EMail

divider bar