HTML - Text, Images and Links

Although the majority of people will probably only ever use HTML to identify themselves in small areas, the information will be presented here, as if for a web page. HTML commands, or tags, are enclosed in the mathematical symbols for "less than" (<) and "greater than" (>). Each of the HTML tags will be introduced in a new paragraph with an explanation for the tag and its use following.

<html> When I start my page, the first thing I need to tell the computer, is that the information following this tag will contain the computer programming language HTML.

<head>This command is similar to the "Create a Header" function of your word processor program. In this area is all the information that must be loaded first, including javascript, METAtags (which will be dealt with at a later time) and the title of the page.

<title>By putting information in this tag, the computer knows that the information included in the tag, is to be printed at the top of the window, rather than on the page. By titling your page, it makes it easier for visitors to your site, to quickly identify where they are within your site, and, should they bookmark that page, they can readily tell what the page concerns. If you look at the window for this page, you will see that it reads "HTML - Text, Images, Links". When I wrote the page, that is the information I put in the <title> tag.</title> By putting a slash in front of a command, you are telling the computer to stop doing the action. </head>

<body>This next commmand governs what your visitors will see on the page, within the limits of their browsers, of course.

I tell the computer to start a new paragraph with this command. "P" for 'paragraph'. It's also an effective way to separate text and images. (Other ways will be discussed later, in the 'Tables' section.)

Paragraphs can be aligned in different ways. This paragraph is aligned to the left margin, which is the default alignment.

I can change the appearance of my words, too. The tag tells the computer that the text is to appear a certain way. Without adding any attributes or specific instructions, the tag uses the browser default for the colour, face and size of the text. For most browsers, the default is "black", "Times", and "3".

To change the colour of a font, I type in or . The first is the plain name of the colour, the second is the hexadecimal version of the same colour.

To change the size of a font, I can type in , and get this size of font, or I can type in , and get the same size. Remember, the default size of font is "3", so the first tag tells the browser to display the text one size larger than the current display, the second specifies a font size.

Changing the face of the font can be a bit tricky. Not eveyone has the same fonts installed on their computer. One way around that is to specify several fonts, or you can specify a generic font group. I usually use both. Specifying may allow you to see the same font as if I had specified , but then again, it may not.

What do you see if I type ? Does it change when I type in ? For me, it does, because I use the font face "American Uncial" for my "fantasy" default. (Setting the default fonts and sizes is part of your browser's "Preferences" section.)

Now, if you're as lazy as am, you can put all of your attributes in one tag. Typing will change everything at once. Changing everything back to 'normal' is as easy as .

To change the style of a text is extremely complicated, but I shall include it anyway. Perhaps some day, even our kids will understand this without needing a university degree in programming.

Before text that is to appear BOLD, type . When you wish the bold text to end, type . The same holds true for Italic text, Underlined text (which can, unfortunately be mistaken for a link.), and <s>~~Strikethrough~~</s> text (I don't use this myself. I prefer to hide my spelling mistakes, thank you.)

There is a simpler way to change a text's size and style, but it is rather limited. There is a tag that makes the largest <h1>

headline

to have the margins return to normal.

There may be times 
When you want
Your text to be
In only one paragraph
But single-spaced
Like poetry.

The or "break" tag does this quite well, don't you think?

Now, you've noticed that this page uses horizontal lines, or 'rules', to break up the different sections. The tag <hr> is used to do this. You can change the width, length and shadow of the rule by typing <hr width="#"> to specify a certain number of pixels for the rule, or <hr width="#%"> for the rule to be a certain percentage of the page. <hr size="#"> will change the height or apparent thickness of the rule, and <hr noshade> removes the shadow effect. For example:

And that gets your basic web page done. Now for the pretty stuff..........................................................................................................................>>>> Next

Back