Software to use | Basic HTML tags | Making lists | Pictures & Links
The idea of this tutorial is not to give a comprehensive knowledge of HTML, but to provide enough tools to allow our clients to update files. If we have provided you with a web site, for example, and you have a news page which is updated regularly, we will have made a Server Side Include (SSI) in an .htm file which you can upload. (If you have a Content Management System, these instructions do not apply to you; you will be updating your pages from your web browser.) These files must not have body tags etc, but there are text-formatting tags that you will find useful.
To learn how to upload your updates to the Internet with cPanel, go to our brief tutorial here.
If you are updating an SSI, do not use a fancy word processor such as Microsoft Word. Open a basic text editor like Notepad. Be sure that the file saves with the extension specified in our original communication with you (usually .htm), and that you name the file with the same name as you were given (e.g. update.htm), so that it will replace the old version of your news.
It is very important that you open and close your HTML tags. What is meant by opening and closing will become clear below.
The most basic formatting tag for your SSI is the paragraph tag. By using paragraph tags, your text will be neatly divided, rather than running together. Nothing could be simpler than creating a paragraph tag. Here is an opening paragraph tag:
<p>
That's it!
And at the end of your paragraph:
</p>
The backslash means you are closing your tag. It is used on most tags you will be employing. Here, then, is a demonstration paragraph:
On the page, the above code will come out looking like this:
This is your paragraph text. When you get to the end of your paragraph, use a closing tag. This is more filler text. Blah blah blah blah.
(By the way, for a nice separating line like the one above, just insert <hr /> [for "horizontal rule"].)
Chances are, you will want to use headings to separate your content. HTML has several levels of headings. If you are using an SSI, start with second-level headings and work your way on down as far as sixth-level (rarely necessary); our master page will already have put the first-level heading to use.
Just like paragraph tags, heading tags are easy to create:
Don't forget to close your heading tags, just as you close your paragraph tags. Thus a second-level heading should look like this in your document:
<h2>This is Your Heading</h2>
Note: How each of these headings will actually look on your page will depend on the styles we created for you when we built your site. The headings above, for instance, follow the styles for this site, and your own pages will be different.
Here are some other tags you will find useful:
Bold print: <b>Place your text between an opening and closing "b" tag.</b>
Italics: <i>Place your text between opening and closing "i" tags.</i>
Underscore: <u>Place your text between opening and closing "u" tags.</u> (Note: Underlining text other than links is not recommended. On the web, an underline virtually means "link," and employing underlining for other purposes will be confusing to viewers of your site. Use other tags for emphasis, if necessary.)
Making a list? If you want a numbered list, you don't need to do any indentation or write the numbers yourself. A numbered list is called an "ordered list." With a list, you will have two levels of tags: for the list itself, and for the list item. Your format will look like this:
The above formatting will get you a result that looks like this:
Note that as well as providing the numbers, the ordered list has automatically indented your list items to set them off from other text.
If you don't want numbers in your list, just markers, you want an unordered list. In place of "ol" your tags will now be "ul." Your inner tags will remain the same, "li" (for "list item"). Thus:
The above formatting will result in this:
There are two more things that you may find you need to do on your page. I have groups these two together, because in truth, both involve links.
For a text link, you need to provide both the text and the address the text will direct the user toward.
Here is the structure of a text link:
<a href="http://www.domainname.com/pagename.htm" title="cool stuff ">Check out this page!</a>
In the above, what follows the <a href=" is the URL you are sending your reader to look at (don't forget to put the URL in quotation marks). "title" will not appear on the page, but it is useful for other purposes; just write something descriptive about the link. In the case above, the only text that will actually appear on your finished page is "Check out this page!" How it looks will be dependent upon how we have designed your links to look in that particular section of your web page.
You may wish to add a picture to your page. Please remember that a picture is never actually in the web page; it appears on the page because of a special kind of link. What this means is that if you want to have a picture appear on your site, you will need to know where it is on the web, so that you can link it. The simplest is if you upload a picture in the same folder as your web page; that is the technique I will teach you here.
(NOTE: if you are going to include a picture in your SSI text file, please be sure it is not too large to fit in the size of your file. Otherwise, you will make a mess of your page. Note also that you need to use picture file types that will work on the web. In the case of a photo, this will usually be a file ending in .jpg or .jpeg. As well, not only physical dimensions, but "weight" in kilobytes is very important. Images take a long time to download, and likewise take up a lot of disk space compared to text. Therefore, you need to optimize - basically, meaning, reduce the "weight" of your pictures before uploading them. This will require some kind of photo-editing software.)
To "call" a picture into your page, you need to create a link with this structure:
<img src="picturename.jpg" alt="My picture " border="0">
If you want to make your picture a link, do it this way:
<a href="http://www.domainname.com/page.htm"><img src="picturename.jpg" alt="My picture" border="0"></a>
By clicking on your picture, the viewer will be taken to the site you have linked.
The above instructions should get you started. It is unlikely you will need anything more in order to work with your SSI news pages. If you do find there is something more you need to put in your SSI file, use a search engine and find some more tutorials on HTML.
For instructions how to upload your updated file to your site using your Control Panel, click here.
Click on the monitor for more info about a site.