HTML – Introduction

You should buy an HTML 4.0 reference book or download tutorials and references from the sites I have listed. I will not be writing up explanations for the tags used in the samples that I go over in class!

HTML stands for HyperText Markup Language. In fact HTML, is not a programming language at all, it is a markup language. For you who are familiar with programming, you will quickly notice that HTML does not meet the conventions of condition testing and looping. An HTML document is made up of ASCII plain text. Special markup codes are embedded in the text to make it a markup language. You can write HTML using an editor or simply using Notepad – that is what I use which accounts for the spelling errors you see on my pages!!! HTML tags are embedded in the document that you create. The angle brackets < and > surround the markup instructions and make them detectable.

The structure of an HTML page is:

Notice that the beginning is simple enclosed in the angle brackets while the end of a command, section or the end of the HTML is enclosed in angle brackets with a /. In other words angle bracket HTML close angle bracket indicates the start of the HTML code and angle bracket slash HTML close angle bracket indicates the close of the HTML code. The same is true of the HEAD section and the BODY section and most commands that are entered in the section.

For now, the HEAD section is going go simple contain the title that will appear in the top left corner of the screen when the browser is displaying the Web page. It is also the title that will be displayed when your site is found by a search engine.


An example of a simple HTML page might be:

This page would show the title in the top left corner of the screen and would display the one line message in the window where Web pages are normally displayed.

We will now look at a sample Web page with a little more substance:


The TITLE command means that First Web page will be displayed in the top right corner of the screen when the browser is displaying the page.

The H1 in the body indicates a head line. There are six headlines, H1 through H6, where H1 displays the largest and H6 the smallest. Headlines call for an automatic line break after them and can wrap if they do not fit on a single line. The words that I want to appear as the headline have the tag H1 in front surrounded by angle brackets and the tag H1 after them surround by angle brackets with the embedded slash.

BR causes a line break it is like pressing Enter/Return. In this example I wanted to end the line and skip a line so you see 2 BR tags surround by angle brackets. Note that they could have been next to each other on the same line.

P indicates a new paragraph which means there is a line break prior to the new paragraph. You can use closing P, but usually they are omitted since something that causes a line break or a new paragraph essentially terminates the P.

UL is the unordered list tag. It causes a line break before the list and after the list. The LI tag specifies the elements in the list. Developers don’t use a close LI tag because the next LI tag essentially closes the previous one and the end of the table closes the last one.

The table is closed with the UL tag surround by angle brackets and the embedded slash. The default for list items is the filled circle in front and list items are indented. Notice that in the last list item the H3 headline is used to make the text stand out.

The HTML code is done so next I close the BODY and close the HTML itself.