Friday, September 25, 2009

Non Nerd HTML 1

Lets see where we are:

I am making the following assumptions:

1. You have a computer at your disposal
2. You do know how to turn it on, and get your operating system up and running.
3. You know what a web browser is - the program that you click on to get to the Internet.
4. More seriously, do you know how to find a file and navigate your file directory?
5. Do you know what a text editor is?

6. I use Ubuntu Linux Ubuntu Linux, and it is going to be easiest to follow along if you do to. If not, don't worry, we will still get you up to speed. If you use Internet Explorer and can't get certain things to work, please email me or leave a note in the comments. Alternatively, you could send me a tweet.

Good, if you are still with me, then lets jump right in.

We'll get to the "what is" stuff later. Lets get right into making our first web page.

Open a text editor, a really plain, basic one. If you are on Windows, use Notepad and if you are on Linux, use the default text editor. Whatever you use, don't use the

html is typed in mark-up. Don't get to worried about that for now. Type the following:

<html>
<head></head>
<body></body>
</html>


Now go "Save As" and choose a location in your file system to save it. You'll want a folder for all this stuff, because we are going to do a lot of this. Why not make a folder called "Webs" and save this file as "WebOne.htm"

So what have you got now. You have a fully functional web page that you can upload to the Internet, if you wanted to (please don't...there is enough rubbish as it is.)

Your web page does....nothing. Nothing yet. Lets look at what we have so we can understand a little of how the whole thing works.

We basically have three 'containers' each of which starts with an opening tag and a closing tag. are the three opening tags and, of course, and are the three closing tags. Get use to this...It's basically what HTML is all about.

Now, lets do something with it. We want some content. Think of the stuff in the body tags as being the bit that actually ends up on the screen. So, lets add some stuff here.

In your text editor add a little text between the 'body' tags:

<html>
<head></head>
<body>Shine on you crazy... </body>
</html>


Now go ahead and save it. You need to save it with either a .html or .htm file extension. Either will do fine.

The next step is to actually see it in your browser. Open your browser (Internet Explorer, or even better, Mozilla Firefox.)

Note: In this tutorial I will later on start to talk about various browsers, but while we are learning the basics, I am going to mostly assume that you are using Firefox.

Spread Firefox Affiliate Button

Go to the place where you enter the websites that you want to go to and clear whatever is there (probably your default home page.) Now type the file path to your new HTML file. In Linux it is going to be something like this:

file:///home/you/webs/WebOne.htm




 Saving the file in Ubuntu Linux.











Saving on Windows XP










And hit return/enter and you should see your page displayed. If it didn't work, please post in the comments or on send me a message on Twitter

Thats the first step. A really easy first step. To get it right you would now have learned:
1. The three basic mark up tags that form a web page (html, head and body)
2. Where the stuff that you see on the page goes (i.e. between the body tag)
3. How to save your htm file

Right, so now you can put readable content into an html page.  That's great.  Celebrate.  But it was easy, wasn't it.  In the next section we are going to cover the basics of formating the stuff in your body.

If you enjoy learning html with me, please subscribe to this blog