Basic Html

Basic HTML Course

General | Textcolor, aligning,... | Background| Images| Links| Lines| Lists| Tables| Sound| Framing

General

What? Did you say HTML?

Even if you want to place just one letter on a webpage online, you must have a basic knowledge of HTML. For many this represents too big a hurdle, but if you read the content of these help pages you will find that is not so daunting. For HTML is actually quite straightforward. We'll even go further than that: reading the explanations about the HTML phenomenon will take more time than creating your first offline page! Are you ready for it?

What is HTML?

HTML stands for HyperText Markup Language. It is essentially a collection of codes and normal text that are placed into a file which is then "read" by a browser, such as Netscape, Internet Explorer, Mozilla, Opera, etc. The codes tell the browser how the content of the page is to be displayed: not only with respect to font size and colour but also to layout and page structure.

HTML is a standard promoted by the W3C. Version 4.0 of the standard is now out. In the meantime, dynamic HTML is gaining in popularity and you should apply yourself to XHTML (Extensible HyperText Markup Language) if you want to be "in."

As well as the different browsers there are differences in the way in which the code is read. It is therefore possible that, when calling up the same webpage, you obtain a different result with different browsers. When creating a basic webpage, however, the likelihood of any differences occurring is minimal so you will not have to worry about that.

What is HTML code?

As mentioned earlier, HTML is a mixture of codes and text. These codes are usually called "tags" and always have the following basic form:

A distinction can be made between the various types of tags:

basic normal text

with a start and end tag normal text

With extensions or options in HTML

Remarks:

* there is no limit on the number of options inside a tag;

* an end tag must never contain any options normal text

normal text

With other extensions normal text

The options inside a tag look like this: option1="value" option2="value," etc. Once you have grown accustomed to the tags, they are very easy to use. It is possible to use almost every option inside different tags.

What is an HTML page?

An HTML page is always made up of different parts. By this we mean not only the various photographs and texts that you place on the page but also the parts in the code that must be included if you are ever going to be able to view your page on the Web. The minimum basic code that you need is:

The real action takes place between the and tags. It is here all code and text is inserted for building your page. For more information on this subject, please refer to the next sections.

Code structure

It is not important where you place HTML code. Provided there is no error in the code, everything can be placed on just one line, if need be. For example:

The HTML codes below yield an identical result in your browser, even though in example 1, everything is neatly structured, while in example 2 all the elements are placed one after the other.

Example 1 line 1

line 2

line 3

Example 2 line 1line 2line 3

Another such departure in terms of structure is that HTML recognizes only one space. So if you type this is a large space, your browser will merely display this as "this is a large space."

N.B.: if the visible text runs beyond the edge of your browser, the lines are automatically wrapped.

Code sequence

It is possible that you use various tags one after the other before entering one word of text or an image. This is certainly the case if you will be working with tables. Many of the tags used have an end tag of the format . Where this is the case, the rule is that the tag that starts the row must also end the row. It will therefore look like this:

this is the visible text

Of course, you are not obliged to close all the tags together:

this is the visible text

Relative or absolute links

You can insert either a relative or absolute link to an image, a file or another html page that belongs to your website. An example will help to illustrate the difference between these two items:

Absolute:

Relative:

With an absolute link, the path is created from the lowest level. For an image on your hard drive, this is c: (or d: or ...); on a website you then obtain, for example, http://webspace.com/sb100439/images/testphoto.jpg

With a relative link, the point of departure is the location (directory) in which you currently are. Let us assume that the absolute path to your page on your hard drive is: C:webspacetesthtmltest.htm

When you create a link from this page to the image located on:

* c:webspacetesthtmltestphoto.jpg (absolute), this becomes (relative):

* c:webspacetesttestphoto.jpg (abolute), this becomes (relative):

* c:webspacetestphoto.jpg (absolute), this becomes (relative):

* c:webspacetesthtmlimagestestphoto.jpg" (absolute), this becomes (relative):

Textcolor, aligning, subscript, font,...

Paragraph

One of the most commonly used tags to separate text and images from each other is . When you use this tag, a horizontal blank line is placed between the text/images.