123Webmaster.com : Onsite : Building
The ABC of HTML: Lesson 1

by Janine Dalton
http://www.httpcity.com/jalouda/
 

Lesson 1 - First Steps

What Is HTML?

HTML stands for Hypertext Markup Language, but you don't need to know that!. All you need to be aware of is that all web pages are built from this language. Your browser (probably Internet Explorer or Netscape) turns the HTML code into a web page, but you do not need to worry about how this happens either.

Why Learn HTML?

Web page creators are divided into two camps: those who write pages directly in HTML code using a text editor and those who create pages with easy-to-use point and click editors. A few of the former look down on the latter as not being purists, which is really quite sad and speaks volumes about such individuals. In fact, many sail through life never knowing the language exists, but if you have a website or are thinking about starting one there are practical reasons why a smattering of HTML could prove useful.

Firstly, if you use a point and click (WYSIWYG -what you see is what you get) editor which can cater for those with no knowledge of HTML whatsoever and something fails to work on a page, knowing the basics could solve the problem instantly.

Furthermore, if you do not know any HTML the wise thing to do is to stick to whatever templates your editor has, yet these can often restrict your creativity by forcing you to have a horizontal line here, an image there etc. A little knowledge of HTML would be all that is needed to change the position of, or at the very least remove offending objects.

Finally, there is much satisfaction to be gained from creating your very own page, line by line, completely from scratch. Maybe I am just a control freak, but by creating your pages that way you have complete power! Anyway, for fairly basic pages like mine, it can be far simpler to build up your page step by step directly in HTML.

Well, I think I have bored you enough with my argument but I hope I have shown that it is not just snobbish computer wizards who have seen the light when it comes to HTML but novice site owners like myself too!:o)

My Approach

Before we proceed I should point out that I am a beginner at HTML too, which explains my rather simplistic, some would say clumsy, way of explaining things. Many would benefit from a far more formal approach, but mine has the advantage that I take nothing for granted and view each topic from an absolute beginner's perspective. If that sounds good to you, read on!

PLEASE NOTE: ALL INFORMATION BELOW ASSUMES THAT THE PAGE BEING CREATED HAS NO FRAMES. I DO NOT DEAL WITH FRAMES IN THIS TUTORIAL. FOR A GOOD INTRODUCTION TRY GETTING STARTED'S GUIDE

HTML Tags

The first thing to learn is that every single page starts out looking exactly the same. The code for each page must be made up of two parts: the HEAD part and the BODY part.

The actual code itself consists of various TAGS, which are written inside the symbols < >. These tags surround text which you want displayed on your page. Most tags are made up of 2 PARTS, which I call the OPENING PART and the CLOSING PART. The opening part goes before what you want to display; the closing part comes afterwards. The 2 parts are differentiated by the closing part's forward slash.

A common mistake is to omit the forward slash or leave out the closing part altogether, which can have dramatic consequences!! I recommend writing both parts together and inserting what you want to display inbetween them afterwards to avoid this.

You can present and layout your code however you wish, since HTML is not case sensitive. Some write the tag labels in upper case (capitals) to aid legibility and give clarity. I prefer to write all the code in lower case (small letters) since it is considerably quicker if you can't type!!

It is a good idea to leave plenty of space around your code, to start each tag on a new line and to add plenty of comments (notes to yourself/others which explain the code and are not displayed on your page) to facilitate future editing and correction of errors. The comment tag looks like this:

<!-- This is a comment which will not appear on my page -->

The 4 Compulsory Tags

The 4 COMPULSORY TAGS for a page are the HTML tag, the HEAD tag, the TITLE tag and the BODY tag. The layout of the tags looks like this:

<HTML>

<HEAD>
<TITLE>put it here</TITLE>
</HEAD>

<BODY>
write the code for your particular page here
</BODY>

</HTML>

If you like, under the view menu on your browser click source to have a look at this page's HTML code. You will notice that, just like every other page ever created, these 4 tags are present.

I think that it is a very good idea to make a template document containing these tags (copy the code above and paste it into a new Notepad document), since every page you make will have to contain them. You will find more detailed instructions on how to do this, along with a word or two on building your page and uploading it in the last section of this page.

The HTML tag surrounds the entire document. Similarly, the HEAD tag encloses the HEAD PART and the BODY tag surrounds the BODY PART of the page. The TITLE tag has no such role to play, but is important since it is the only tag that must be present within the head part.

Note that the title you enter between the 2 tag parts is not necessarily the name your page is saved under. The words you place here willl appear in the TITLE BAR of any web browser, located above the menus along the top of the screen, when your page is viewed. So your page could be saved as football.html but its title could be The World's Greatest Football Web Page Ever! When visitors bookmark your page, it is the title that becomes the name of the bookmark, so choose it carefully!

In most pages the head part comprises of only a few tags at most, as the code for all information to be displayed on your page is contained within the body part.

Instructions For Creating A Template And Making Pages Using Notepad And Uploading Pages To The Internet

To make a template, simply open MS Windows Notepad (you will find it under the accessories menu), copy and paste the sample code above into the new Notepad text file and then save the untitled.txt file as a HTML file, which has the extension .html. To do this, just go to the file menu, select save as and enter template.html as the file name. Don't worry about the file type you save your work as, it will work if you just leave this box showing .txt)

Now when you want to create a new page, open your web browser e.g. Internet Explorer, but do not connect to the internet, go to the file menu, select open, click on browse, find your template.html file, and click open. Don't worry if all you see is a blank screen because you should!

Under the view menu, click on source, and you should see a familiar sight; Notepad opens up and the template file containing the four tags is before you. That is because the SOURCE CODE of a web page is the HTML code. Save the file as whatever you want your page to be called e.g football.html and close it.

Next, go to open in the file menu, and open the file you just saved and closed. To start building your page, click on source in the view menu and work away in the notepad file that appears. To see what your code actually looks like as a web page, simply click save, minimise notepad and press refresh in your web browser.

When finished you only need to save the Notepad file since, although it doesn't look like a web page, it is a HTML file. So there is no need to save the page which appears in your browser since the Notepad file is just your page in another form. So save the Notepad file, and then close both the Notepad and browser windows.

Of course, while you work at creating your page on your own computer, nobody else can see it. When you are ready to share your page with the rest of the world, you need to upload it to the internet. If you have a site with a free site provider, usually all this involves is going to your area at the provider's site and clicking a few buttons. For a list of a few such providers see my web page building links. If your site is managed another way or if your browser is quite old, you may have to use FTP software instead which, unfortunately, I know nothing about!

When your page is successfully uploaded to your little corner of the WWW known as your DIRECTORY, it will have its own unique address or URL. This will consist of the main part of your site address followed by whatever you saved your page as on your computer e.g. football.html. So, if your site address is www.mywebsite.com/, your new page's URL will be www.mywebsite.com/football.html . If anyone surfing the net enters this URL, your page will appear in all its glory!!

Lesson Index

Introduction: Anyone Can Learn HTML!
Lesson 1: First Steps
Lesson 2: Text
Lesson 3: Colours & Graphics
Lesson 4: Sound & Links
Lesson 5: Tips & Tricks



Discussion - HTML Layout
Related Sites - Check out the extensive list of html tutorial links on 123webmaster.com , to further your html understanding.