More Basic HTML Tags
Introduction
The purpose of this article is, as before, to create a formated document with the fewest number of html tags. In the first article we used only ten tags to create an html page. Now we will use ten more. We will make the text richer and more complex by building on the original tags. We will also add new dimensions by the introduction of photos and graphics. As before the html document must be created in a word processor that saves files in a text or ascii format. The file must be saved with an htm or html extension. You can even use a simple word processor like Notepad, which comes free with Windows. Or you can find a program on the internet like Arachnophilia. They call it careware but there is no cost involved. The program has a built in browser.
How Many
In the first article we used 10 tags plus one. In this article we will use ten more which includes the plus one from the first article. Only 20 tags were used to make this page. With these twenty tags you have enough to make a home page for your internet site.
text color
link color
visited link color
font color
align center
horizontal line
image
pre
border
font size
TEXT COLOR
In the first article we let the browser determeine the default text color but now we will control it. In most browsers the default is black. We will also pick black as the default text color but we can change it anytime we want. Like background color this tag is enclosed in the body tag.
<body text="black">
LINK COLOR
We are now also going to be in control of the link color. This is the color of the link before we use it for the first time. We are choosing blue. This is also part of the body tag.
<body link="blue">
VISITED LINK COLOR
We are now also going to be in control of the visted link color. This is the color of the link after we use it for the first time. We are choosing red. This is also part of the body tag
<body vlink="red">This is the way our default colors in the body tag now look.
<body bgcolor="white" text="black" link="blue" vlink="red">
FONT COLOR
We are now going learn to contol colors for selected words or even parts of words.
<font color="blue">***</font>
ALIGN CENTER
The align tag can have several attributes but we will start with the center attribute. With it we can center headings, photographs or other graphics.
<align="center">
HORIZONTAL RULE
The (HR) tag makes a horizontal line across the page. It can have attributes such as length and thickness but for now we will just use the font color attribute. The (HR) tag can be used to separate areas. It does not need an ending tag.
<hr>
<hr color ="red">
IMAGE
<IMG SRC="Dougwed.JPG"> <ALIGN="CENTER"><IMG SRC="Dougwed.JPG">
PRE
We are now going to us the tag that I called plus one in the first primer. With it I also used escape codes to make the tags visible. Without the codes the browser would just start using the examples as part of code. The escape code < makes the left bracket visible. The escape code > makes the right bracket visible. The code makes one space, a very useful feature. It can be strung together to make many spaces. The 'pre' tag itself allows you to preformat text. You will quickly notice that if you try to make extra spaces or returns in normal text the browser ingores them. The 'pre' tag uses a monospaced typeface so you can even make lists that appear flush one side.
<pre> </pre>An example of pre formted text.
TREE FRUIT TEAM aspen apple Twins wilow orange Vikings pine pineapple Timberwolves
BORDER
Border may not be listed as one of the more common tags in many places but I'm using it to eliminate borders in graphics in links. You wouldn't have to use any border attribute for a link but everyone has a preference and mine is no borders. The default for borders is one pixel if there is no tag. Borders are also used in table but we won't discuss that now.
<BORDER="0">
<A HREF="http://www.hotbot.com/"><IMG SRC="violet.bmp" BORDER="0"> hotbot</A>A Common Search Engine
Hotbot A Common Search Engine
Here is an example with borders where no border tag is specified.
Hotbot A Common Search Engine
FONT SIZE
Font size is another important way to stress text. The sizes vary from 1 to 7. The normal is 3. Minus makes the font smaller and plus makes the font larger.
Copyright by David Nolette
<font size="-2" Copyright by David Nolette>
Beyond HTML
Here we haven't even learned everything about html and already we are going beyond it. But that is just the nature of a web page. A photograph or graphic is not html but the html tags call for it.
Photographs
So where do we get the photographs from. They are all over the internet. But remember you can't just use any photograph you find because their are copyright restrictions. The best way to find photos on the internet is use a search engine. Type in the words free photographs and hit the search button. You may be surprised at how many photos you can use in your web page free of charge.
Another way is use your own photographs. That is the method I use. One of the best investments you can make is to buy a flatbed scanner. I have scanned photos from my family that go back over 100 years. Some were my own photos and some were my relatives. Another way is get a photo CD when you have your next roll of film developed. I have started doing that myself. They are of excellent quality and eliminate the need for scanning your new photos. You could also use a digital camara which records photos in jpeg format.
Graphics
Like photographs, graphics are found on the internet. There is a wide variety of buttons and other graphics on the web. You can also make your own with a graphics program. The simple buttons that I used in the Border tag paragraph were made from a Windows program called Paint. If you want to get more into graphics you will have to buy a graphics program. I use PhotoImpact. You can buy it for less than seventy dollars, a lot less by mail order. It also comes free with a Microtek scanner. Thats how I got mine. With it you can do a lot of photo and graphic manipulation for a low cost. Of course you can also make buttons and backgrounds with it.
Copyright 1998-2003 by David Nolette