HTML, the Basics of How to Start

HTML is very easy. You can write it on any computer using a plain text editor. We will help you make your very first HTML file. As you get better, we will encourage you to take your coding to the next level by using XHTML or by using Cascading Style Sheets. But for the time being, we want to use the KISS method.

First things first: we strongly encourage you to begin learning HTML using a plain text editor. You can use the one on your machine, NotePad on Window's or the equivalent on your Macintosh. There are wysiwig editors that will slam code into your pages, but deny you the opportunity to really master what you are doing. In almost all cases, hand built code is superior to program generated code because it is cleaner and contains less characters. If you want a more powerful text editor, there are many available, but we are partial to NoteTab and TextPad.

An HTML page is just a series of tags and page content. Tags are set off from page content by surrounding the tag content with a greater than and less than bracket. An example is this: <html>. The content within the tag can be either upper or lower case, so <HTML> would also work, however we encourage you to use lower case as it will later work to your advantage when you take your coding to the next level. Most tags must also be closed with a corresponding tag which contains a slash, thus: </html>. So thus far we have an HTML file with this in it:

       	 <html>

       	 </html>

You should open your plain text editor and type this information into it. You can include spaces and carraige returns outside of the tags without any problem because they are ignored by HTML. We next need to place the two major divisions into our page, the head and the body. The head contains information used mainly to aid computers with using your page and the body contains the content that will be visible. We will start by discussing the body and then discuss the head.

The Body

This is the most interesting part of our page, because this we where we will put the stuff people will actually see. If we want our page to say "Hello", then we just add body tags inside the html tag set, and add the word "Hello". It looks like this:

       	 <html>

       	 <body>
       	 Hello
       	 </body>

       	 </html>

Copy and paste this into your plain text editor (or type it if you aren't the lazy type). Save it under the name "myfirsthtmlfile.html" (include the quotes when you save it or you might have .txt appended to the name by the program) and you can open it in your browser by typing the file address such as "c:\myfirsthtmlfile.html" into the address box in your web browser. If all went well, you will be looking at your first creation. If not, chase us down on live chat help. We will get you squared away.

Next we need to learn a little bit of formatting. HTML could care less if you add spaces or returns in your line. It will laugh at your attempts to format your page using these tools. Try this one:

       	 <html>

       	 <body>
       	 Hello
       	 This is the second line!
       	 </body>

	 </html>

We need a couple of more things to help us with formatting the text. If we want to actually have a new line in the output, instead of using a return, we can use a special tag . This means break or line break. You can use it without a closing tag if you wish, but we encourage you to use it like this which makes it self closing. There are a few tags like this that don't need a closing tag, but we always make them self closing in order to allow us to later go to the next level with less problem.

Two more special tricks, and then we will go on to the head section. If you want to have more than one space in a row, you replace each space with   with both the ampersand and the semi-colon required. This must also be lower case to work. Finally if you want to create a paragraph, use the paragraph tag which is paragraph here. The closing paragraph tag is optional, but again we strongly encourage the use of it right from the start. So give this one a try:

       	 <html>

       	 <body>
	 <p>
       	 Hello<br />
       	 This is the second line!
	 </p>
	 <p>
       	 This is the second paragraph!<br />
	 Five &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extra spaces
	 </p>
       	 </body>

	 </html>

Recapping the Body tag

use <body></body> inside the html tags to contain the actual content your viewers will see
don't use carraige returns or multiple spaces to control the actual appearance of the output
use the tag for a return, the tag set for a paragraph
use   if you want more than one space in a row

The Head

Now that we are all turned on by the body tag set, lets get the computers humming with the head tag ... on to Part 2.

This site is totally free to use, you have absolutely no moral or legal obligations to help us continue.
There are however, some costs involved in running the site.

<random humor>
Plus Franki is trying to buy a bigger hard disk to support this site.
</random humor>

So if this site helped you find your way, perhaps you could consider contributing to our costs. Whatever amount you feel this site was worth to you would be just wonderful.
Use PayPal if you do decide to share and help us with the costs and in appreciation for our time and attention, or alternatively buy a book from our Bookstore..

Time in Don's part of the world is: Fri, November 22, 2024 at 00:59 AM
Time in Franki's part of the world is: Friday, November 22, 2024 at 1:59 PM
Don't worry neither one sleeps very long!