A free service of
iWing International
Imagine Software Canada


The Document     Instant Page     Specifics     Page Colors     Links     Images     Codes


First Day HTML

First Day HTML is a quick look at the extreme basics of html. It was written with the absolute beginner in mind, as indicated by the title. Only a few simple commands are introduced to keep the article short and uncomplicated, to help avoid confusion and so that it can be viewed in a minimum amount of time. We have tried to word the article so that it can be readily understood by the newcomer.


HTML
HTML stands for Hypertext Markup Language. The commands for this language are written within angle brackets: < >   Your web browser is programmed to convert the code within each set of brackets into the specified command it finds there.
 
The HTML Document

The code for a basic, blank html document would look like this:

<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>


The above code is the minimum requirement for an html document.

The commands written between the angle brackets are referred to as tags.

Whatever you put in between the <title> </title> tags is what will appear in the title bar at the top of the browser window.

 
Instant Web Page

Would you believe you can create your first web page in less than thirty seconds? If you copy the above code for a basic web page, paste it into Windows Notepad then save it with an .htm or .html extension (for example, page.html) you will have created your first web page. It will be an empty page of course, but still an html document. If you paste it into Notepad and put some text in between the <body> and </body> tags, you will have created a web page with text.
 
Specifics

The first thing to notice is that when you write a piece of code, you must also remove that code by inserting the same expression with a slash in front of it where you want that particular command to stop. This is how your web browser tells when a certain command is to start and when it ends. For example, you can use the command <b> to create bold text. All the text after that command will be in bold type. To let your browser know when to stop making the text bold, you would put the </b> tag.

Here are two examples:

In this line of text I want <b> this part </b> to look bold.

<b> In this line of text I want it all to look bold except the last </b> word.

You can see that once you enter a command, it continues until you remove it with the slash.

Note:

Not all html commands are removed with the slash expression; some are stand alone statements such as the line break command: <br> It is important at this stage however for you to learn that most commands must also be cancelled with the slash expression as mentioned.

 

Page Colors


Your page background, text and link colors are set up within the <body> tag. If you want a white page with black text, blue links and red for visited links (links a user has clicked on before) it would look like this:

<body backcolor="white" text="black" link="blue" vlink="red">

As you can see, it is quite simple. The only catch here is that only some common colors can be entered as words, as in text="white" To use different tones and shades the code has to be entered as a hexidecimal expression. Hexidecimals are beyond the scope of this article but we will show you an example to give you an idea of what this looks like.

To set up a page using the same colors as above only in hexidecimal form, it would look like this:

<body backcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF0000">

Using hexidecimals you can create thousands of colors. We have included some hexidecimal color codes in the zip file if you wish to try them out.
 

Creating Links


The code for making a link looks like this:

<a href="http://.iwingi.tripod.com"> The text a page visitor clicks on goes here. </a>

After saving that code in your html document it will look like this to a viewer of the page:

The text a page visitor clicks on goes here.

This time we started the code with an <a> tag and told the browser where the link should end by using </a> The big difference here is that link code has to be done in two sections so to speak with the link text that the user sees put in between. The "href" expression seen within the <a> tag (in this case, href="http://iwingi.tripod.com") is the destination web site that the user will go to when they click on the link. If you wanted to send a user to Microsoft for example, you would write a link like this:

<a href="http://www.microsoft.com"> Click here to visit Microsoft's web site. </a>

And it would look like this to the viewer:

Click here to visit Microsoft's web site.

One last point about links. The url in the href expression must be in quotes as shown above. Not the whole expression, just the url.

 

Images


The basic code for displaying an image involves telling your web browser where the image is by putting the path to the image within the expression shown here:

<img src="put the image path here">

Just as any file can be located by its path on your own computer, similar rules apply to your web page images. If you want to display an image that resides at another web site, the path will be a url to that image.

Below are three examples of displaying images depending on the location of the image. We will assume that the name of the image is picture.jpg

If the image is in the same directory as the web page that is displaying it, you can simply put the image name in the path section of the code. For example, this is normally the case when you go to a free web site provider to start your first web site. Any files you want to use for your site are uploaded into the same place (directory) at the providers site. To explain another way, think of a folder on your desktop. If all of the files for your web site are in that folder you could use the code shown immediately below. It would look like this:

<img src="picture.jpg">

Now, as an example, let's say you wanted to organize the files at your web site by putting all images in their own separate folder. If we called that folder allpics then you would alter the code slightly to look like this:

<img src="allpics/picture.jpg">

Please note that it may be necessary to add a slash in front of allpics at some host sites. You can experiment to find this out or simply ask the providers of your site. When this is the case, simply change the code to look like this:

<img src="/allpics/picture.jpg">

To display an image that is on another web site, the url to the picture is the path that you would use. Here is an example:

<img src="http://iwingi.tripod.com/picture.jpg">

Please note that most free web site providers do not allow you to link to pictures on other web sites as a way of displaying them on yours.

If you want an image to act as a link you put the link code and the image code together like this:

<a href="http://iwingi.tripod.com"> <img src="picture.jpg"> </a>

When a visitor clicks on the picture they will go to the url indicated in the href expression.

To make sure an image displays properly in all browsers you should include the height and width of the image in the tag. Use an image editor to find out the size of your image and insert the information as shown below. We will assume the height of the image is 120 pixels and the width is 255 pixels.

<img src="picture.jpg" height="120" width="255">

To have a text message appear when a user holds the mouse pointer over your image, use the "alt" expression. Adding an "alt" expression to the above example you would write it like this:

<img src="picture.jpg" height="120" width="255" alt="This is my favorite picture">
 

Additional Codes


Here are a few more codes that you can experiment with:

<b> Bold text. </b>

<i> Italic text. </i>

<b><i> Bold, italic text. </i> </b>

<br> Line break    This command is used by itself. Do not use </br>

<p> New paragraph </p>

<font face="times new roman" size="1"> Set type and size of font </font>
Size ranges from 1 to 7: 1 is smallest, 7 largest.

<h7> Change text size. </h7>
Size ranges from 1 to 7: <h3> </h3>    <h5> </h5> etc.
7 is smallest, 1 is largest.

<hr> Creates a horizontal line on the page
Width and size can be set as follows:
<hr size="2" width="80%"> (Width is percentage of page)
or you can use
<hr size="2" width="500"> (Width is set in pixels)

Once you feel comfortable with the information in this article, here are a couple of sites you can visit for more information on html. If you perform an internet search for something like "html guides" you will find a vast array of web sites offering this information.

A Beginners Guide to HTML
Barebones Guide to HTML



Included in the zip file you downloaded is a file called blank.html. You can use this to practise using html. It must be edited using an ASCII text editor such as Notepad. (Notepad is normally found in your Windows directory. It is called Notepad.exe)

When saving changes to a web page you are working on in Notepad, make sure you select "All Files *.*" from the Save dialogue box rather than "Text Files *.txt" and give the file either an .htm or .html extension. Once you have saved it you can open it with your web browser to see the results of your experimenting.

Please Note: Any time you make changes to the document you must refresh (reload) your browser in order to see them.