Lesson 1

These chapters are basically two introductions. The first is an introduction to the book and discusses its structure and other aspects. The second is an introduction to HTML. This chapter will teach you the basic structure of a HTML document and the primary tags.

Welcome to my tutorial. You might be wondering why the title for the chapter looks so weird, if you are not then you probably do not need to read this book, basically it is a tag for writing hidden text in a HTML document. You still might not know what I mean but you will learn - do not worry.

This book is split up into lessons, each lesson contains usually one or two chapters. Each lesson focuses on a certain aspect of HTML.

I will try to make it as easy as I possibly can for you to learn HTML by reading my book. I have found that the most effective way to learn is to practice as you learn and for that reason I have included a part in the book called "HTML Builder" which can be found at the end of each lesson. I recommend that you do not leave the book in the middle of a lesson but that if you do you should review the start of the lesson before you continue. This feature is described in its title. The idea behind it is that after each lesson you put to use what you have just learned so as you will remember it better. By the end of the book you will have an attractive page describing and displaying what you have learned. And by going to "view source" (found in the "view" menu on the taskbar of most browsers, or by right clicking the mouse on a blank space of the web page) you can see what codes correspond to what on the web page). An example of what I am talking about is that when you learn how to make text bold the web page will display "I learned how to make text bold" and by going to "view source" you will find that "I learned how to make text <b>bold</b>" corresponds to that. Now don't go rushing off to try out the code above because it won't work, as won't anything else in a web page, without the necessary components of a HTML document, which will be discussed in the next chapter.

Throughout this book I will give illustrations from Internet Explorer and from notepad. These will be called "Notepad Viewer x.x" and "Explorer View x.x".

A good start would be to know what HTML is. Someone recently asked me, "where can I get HTML?" Those of you who know what it is will appreciate the slight humour in that quote but others might be asking the same thing to themselves.

HTML stands for HyperText Mark-up Language and is used to create web pages. It is not a program, it is not a piece of hardware, it is a very simple computer language. It is used to "mark-up" a whole load of text and therefore make it look better. It allows for images or sound to be used in web pages, for text to be presented and formatted effectively and more! Although originally planned to do nothing but add structure to a document, for example tell where paragraphs begin and end, it now has grown and incorporated design techniques and so on.

The possibilities of what can be done with HTML are endless (ok maybe not endless, but, you can do a lot of stuff!!!) I will start with the absolute basics, but before we get into actually marking up some text I will tell you a bit about writing and saving your file.

Aall you need is a plain text editor. For example, Notepad for Windows or Simpletext for Mac, but not MS Word or other word processors. It needs to be a "plain text" editor and fancy word processors with features like font change save in their own format. After when you are finished typing save your file, but not as a normal text files (*.txt - for windows) instead as a html file with either a htm or html file extension for example/ index.htm or index.html. To do this in Notepad, type the filename into the filename box with the .htm or .html extension included. For example "index.html". Do not try to find "html file" in the "save as type" box because it isn't there. You can then open this file for editing in your text editor or in your browser to view the output. Now let's get started.

As I said, HTML is about marking up text, this is done using "HTML tags". Note that it is not necessary to have text, some pages are made up of nothing but tags. A tag starts with the '<' sign and ends with a '>' sign. Between these you place text which identifies which tag you are using and customises that tag for your needs. An example of a tag would be <html>, which marks the beginning of the html document. The html tag is a container. A container is made up of a start tag and an end tag. And whatever appears in between the two tags, which can be effected, is effected in whatever way the tag is designed to effect it (that is a lot of effects!!). For example, all the text between the tags may be turned green but images will stay the same colour as they always were because you can not use html to recolor images. An end tag is identical to the start tag it corresponds to except that between the '<' and the first letter of the tag name appears a '/'. For example, I told you that <html> marks the beginning of a html document and the corresponding end tag is </html>. Whatever is contained between the tags is part of the html document.

These tags signal the start and end of the heading of a HTML document.

This is not a necessary element of a HTML document but it can and does usually increase its effectiveness. The most commonly used element of the <head> tag is <title>. This provides your page with a title, which will appear on the title bar of the browser.

The <title> tag however is quite simplistic. Here is a view of a simplistic HTML document using the <title> tag.

Notepad viewer 2.1

<html>
<head>
<title>
Look my title appears on the title bar
</title>
</head>
</html>

Explorer View 2.1 - Click to see a bigger and clearer version

Each piece of information is contained in a separate tag. The main pieces of information you provide are, keywords and description.

<meta name=keywords content= "ship, water, titanic, ice-berg">

<meta name=description content="Come aboard my site and discover the truth about what happened aboard the titanic">

These tags should be anywhere within the <head> and </head> tags.

As you may have noticed in the picture above there is a big white area where the main page should be. The way to access this section of the page is with the <body> tag. After this tag and before the </body> tag you enter all your text, pictures and anything else you want on your page. To enter text just type away but to format this text and insert images and the rest you will have to learn different tags and codes.

setting the margins

In the window you can set margins for top or left. Basically what this means is that inside the window no text or images will appear past these margins. The measurements are in pixels and the tags are an attribute of the start body tag.

This will only work with Internet Explorer, Netscape Navigator does not support it.

Notepad viewer 2.2

There are many attributes to the start body tag and a complete listing can be found at the end of lesson 2.

the explanation for the chapter heading

It is possible to add text to a HTML document that will not affect its resulting presentation or anything else to do with it. To do this you simply use this tag and replace the text with your own.

<!- -this is the text that is hidden- ->

Do not assume however that no one will be able to see this because they will by pressing "view source". Not only text but also any amount of HTML code can be excluded by using this and it can come in handy if you want to exclude a part of your page until a further date. When that day comes all you have to do is delete the "<!--" and "- ->" and the section which was held between is now included in the page.

Notepad viewer 2.3

<html>
<head>
<title>
Welcome
</title>
</head>
<body>
Oisin has been maintaining this page for over a year now.
<!- -Jack has been maintaining this page since 23/9/99- ->
</body>
</html>

When 23/9/99 arrives then the hidden text tags can be removed.

Another use of hidden text is to insert comments in your html document, this is what they were originally dexigned to do and it is the most common use of them today.

multiple spacing - no such thing

This is only a short statement I want to make. Basically all I want to say is that browsers interpret multiple spaces in text as one single space which makes it awkward to place your text where you want it. The next chapter is all about arranging your text in a way you want.

next lesson home comment more downloads download this

HTML Builder- End of Lesson 1

It is now time to turn on your computer and open up "Notepad". I told you how to do that in the introduction. I recommend that you follow what I have written but that you don't just transcribe it. You should make sure that you understand everything you are typing and that if you don't you should make reference to it in the book first.

Notepad viewer- HTML Builder 1

<html>

<head>

<meta name=keywords content="practice, web, page, html">

<meta name=description content="This is the site I will use to practice writing HTML">

<title>

I have now completed Lesson 1

</title>

</head>

<body topmargin=20 leftmargin=15>

I have now finished lesson 1. I know the very basics of writing HTML. I know that the start and end HTML tags are necessary in a HTML document. I know that the meta tag is used to give information to search engines, i.e. keywords and description. I am able to assign a title to my documents (see taskbar above). I know that all text and images etc. are to be included between the start and end body tags. I know two attributes of the start body tag, topmargin and leftmargin and I know that each of these is measured in pixels. I know how to insert hidden text in a HTML document for example there is hidden

text in between the words hidden and text in this sentence.

</body>

</html>

Explorer view- HTML Builder 1 - Click to see a bigger and clearer version

Now save your HTML document as "Builder.html" in the directory c:\html (I am assuming that you know how to create directories, if you don't then don't ask me, I'm your HTML teacher)

next lesson home comment more downloads download this

Information The official home-page where this document can be downloaded is http://www.geocities.com/SiliconValley/Network/4759/
This document (whole or part) is not to be used, plagiarised, or its' content attributed to any other author. Any quotes must be acknowledged to the author and the author must be informed of the quotation before it's publication. This is effective whether the quotation is being transmitted by electronic or any other means. The author of this document is Oisin Prendiville who can be contacted at html3.2@technologist.com