HOW TO BUILD A PROFESSIONAL WEB SITE
Rel. 1.1
LESSON 01
|
by Carlo Scodanibbio
|
|
introduction to html
Now we start. What is HTML ?
The HTML Language is a universal language understood by all Internet Browsers (Microsoft Internet Explorer - Netscape - and others).
It is an extremely simple programming language, and consists in "instructions" given to the Browser to perform certain operations.
These instructions can be written practically with any text editor.
The simplest way to write HTML instructions is with Windows NOTEPAD.
By typing your HTML instructions with Windows NOTEPAD you learn the little secrets of the HTML language, which, at least initially, might prove a bit hard. That's why I call it "the hard way".
There is also an "easy way" of preparing HTML documents: there are, in fact, special Editors that can write the HTML language (sort of) for you - for instance Microsoft Frontpage - or Page Mill - or many others.
They are rather "user friendly", and, generally, rather accurate.
Advantages and disadvantages of utilising an HTML Editor instead of writing directly HTML instructions will be pointed out during this course.
Now let me just tell you that the main reason why this course is structured "the hard way" is because I want you to understand thoroughly all the secrets of the Net: how it works, how a Browser works, how the HTML language works.... and, most of all, I want to make sure that you have total control on what you are doing: this way you will avoid any possible mistake very likely to occur if you do not understand what happens..... (Internet is full of "mistakes").
Moreover, this Course is structured (starting from Lesson 06) in compliance with the new XHTML Standard - this is going to be the future, universal Standard applicable to Web Pages, and I can tell you that it is not "tolerant" at all.
Believe you me, 95% of the present Internet Pages will have to be re-written in order to comply with the new Standard - I want to make sure you won't run that risk !!
In conclusion, this course is concerned with direct writing of an HTML document in HTML language (and, later on, in XHTML).
Believe it or not, the "hard way" will not be too hard after all: I promise you that, in less than 10 minutes, you will have made your first Web Page !
If you would like to read the HTML story click here (Enclosure 01).
This Enclosure is displayed in a "New (or Auxiliary) Browser Window". In this Course I will often use Auxiliary Browser Windows to display Tutorials, Enclosures, etc.
You may close a New Browser Window at any time after viewing it by simply clicking on the "Close this Window" link I provide in it at the bottom of the Page or also by clicking on the typical Window Close tool (the cross), like this:
getting organised
Before you start writing your first Web Page, you should get organised, and decide where you are going to save it prior to publication on the Net. In fact all Web Pages are built in "local" mode (in a Personal Computer) and only when they are ready for publication they will be transferred to a remote Server in the Net.
In this Course, for the time being, we shall work in "local" mode.
So, create a folder for your first Web Pages (for instance in your Hard Drive, or in a Subdirectory, or in your Desktop) - call it, for instance: Mywebpage - or, for simple projects, you may work directly on your Desktop.
In this Course I will assume that you will create your Mywebpage Folder in Windows Desktop.
Obviously, I am assuming you are familiar with Windows 95 or Windows 98 or superior (2000 or XP) or Windows NT and you know how to create Folders. If not, click here, for a quick tutorial (Enclosure 02).
The new Folder in your Desktop will appear like this:
the html document
And now you can start. Open your Notepad [if you don't know where to find Notepad click here, for a quick tutorial (Enclosure 03)].
Write:
<HTML>
</HTML>
Your Notepad Window should look like this:
You have written the very first and most important HTML instructions for your Browser.
Each of the two instructions above is called a TAG.
The first is a STARTING TAG, and the second is a CLOSING TAG.
To make a CLOSING TAG, simply add a / to a STARTING TAG.
Most TAGS (but not all) come in similar pairs: STARTING TAG and CLOSING TAG, (or, Instruction Start and Instruction End).
With TAGS you give instructions to your Browser:
the TAG <HTML> tells the Browser: "Hey, Browser, this is the start of an HTML Document" (or "Page")
and, similarly, the </HTML> TAG tells him: "this is the end of an HTML Document".
head and body of an html document
Now, every HTML Document must have a HEAD and a BODY.
In the HEAD of an HTML Document you put (at least, for the time being) your Document TITLE.
In the BODY of an HTML Document you put all your stuff: your text, your pictures, your music, your animations.......
head and title of an html document
To create the HEAD of an HTML Document you write another pair of TAGS "within" your HTML TAGS:
<HTML>
<HEAD>
</HEAD>
</HTML>
Note the order in which the TAGS are written:
First comes the <HTML> TAG, which means: this is the START of an HTML Document
Then comes the <HEAD> TAG, which means: this is the START of the Document's HEAD
Then comes the </HEAD> TAG, which means: this is the END of the Document's HEAD
The comes the </HTML> TAG, which means: this is the END of the HTML Document
This fashion of ordering TAGS is called "nesting": all TAGS must be "nested" in order for your Browser to understand the instructions you are giving, and this rule is very important.
It would be wrong, for instance, to order TAGS in the following (overlapping) sequence:
<HTML>
<HEAD>
</HTML>
</HEAD>
OK ?? This is a very important point.
Now you can insert a TITLE for your Document:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
We have inserted another pair of TAGS (<TITLE> and </TITLE>), to let our Browser understand that your Document has a TITLE. The textual Title itself goes between the two TITLE TAGS. Choose a name for it, for instance "My experimental Web Page".
<HTML>
<HEAD>
<TITLE>My experimental Web Page
</TITLE>
</HEAD>
</HTML>
The TITLE is what appears at the very top of the Browser's window, in the blue "Title Bar".
Please note that it makes no difference if you type the words "My experimental Web Page" between the TITLE Tags as above, or if you organise your Document as follows:
<HTML>
<HEAD>
<TITLE>My experimental Web Page
</TITLE>
</HEAD>
</HTML>
or even like this:
<HTML>
<HEAD>
<TITLE>
My experimental Web Page</TITLE>
</HEAD>
</HTML>
Your Browser just follows instructions (TAGS) and what is in between, and is not concerned at all with the way and the style you position or order your HTML coding - your Browser is only concerned with the sequence of instructions.
For instance you might write the same Document like this:
<HTML><HEAD><TITLE>My experimental Web Page</TITLE>/HEAD></HTML>
and it would work just as fine.
Obviously it is up to you to create paragraphs, spaces, etc. so that you won't get lost in what you are writing ! - huh, huh...
body of an html document
The bulk of your page "content" will be in the BODY of the Document.
To create a BODY we need another pair of TAGS just below the HEAD section - as you know, a body is always under a head (or a head is on top of a body), heh, heh....
<HTML>
<HEAD>
<TITLE>My experimental Web Page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Let's add some simple text.
Within the BODY TAGS type: This is my first Web Page !!!
Your HTML Document will look like this:
<HTML>
<HEAD>
<TITLE>My experimental Web Page</TITLE>
</HEAD>
<BODY>This is my first Web Page !!!</BODY>
</HTML>
Once again, it makes no difference if you position your sentence This is my first Web Page !!! differently, provided it is within the BODY TAGS, for instance:
<HTML>
<HEAD>
<TITLE>My experimental Web Page</TITLE>
</HEAD> <BODY>This is my first Web Page !!!</BODY>
</HTML>
saving an html document
So far your HTML code should look like this:
Now it is time to save it. An HTML Document must be saved as .html and not as text. This is very simple.
In your Notepad window click on the Menu File then Save As, like this:
You will be presented with a Dialogue Box.
Select the folder in which you have decided to save your document. Or, as in the case of this Course, save it directly in the Mywebpage Folder just created in your Desktop.
To do so, go to Desktop, Mywebpage following this procedure:
- Activate the "Save in" selection list by clicking on the little black arrow, like this:
- Your "scroll-down" selection list will probably be different from the one you see below, which is the one in my Computer. However, at the top of the list, you will see "Desktop". Click on that, like this:
- You will see all Folders and Files present in your Windows Desktop (again, yours will be different from mine). Somewhere you should have a Folder called "Mywebpage". Double click on that.
- Your Folder Mywebpage is empty, like in the image below. Decide a file name for your page: for instance, call it "testpage".
Where it says File name: delete "Untitled" and type in testpage.html
- Where it says Save as type: make sure to select All Files(*.*) and not Text Files. All you have to do is to activate another selection list by clicking on the little black arrow, like this:
and then select All Files(*.*) by clicking on it:
- Click on "Save" (or hit your Enter key)
and you have done it !
- Now your Notepad window will look like this:
Now it is no longer "Untitled" but has a filename: "testpage".
opening an html document
Well, well, well, Bravo, Bravissimo, may I congratulate you ! You are now the legal and proud owner of a real and fully functional Web Page, that you could publish on the Web, so that 600 million Internet users could see it !!!
Depending on which Browser you have installed in your PC, the file you have created will appear in your Mywebpage folder as a Microsoft Explorer icon, like this:
or as a Netscape Navigator icon, like this:
By double clicking on it you can immediately judge the outcome of your hard efforts.
But before doing so, let me tell you how to come back to this Lesson 01 which is now being displayed by your Browser. In fact, it is well possible that your Browser will open testpage.html in this present window, so you will see your testpage but you will have lost this Lesson.
But you have not lost it. Your Browser keeps a track of it. So after opening your testpage.html (by double clicking on it), in order to come back to this Lesson you have just to click on the "Back" button of your Browser.
This is the typical "Back" button of MS Explorer:
and this is the typical "Back" button of Netscape Navigator:
((As you may notice, Browsers display, on-mouse-over the Back button, the Title of the Page you would go "back" to if you clicked on it......))
So, now you can double click on your "testpage" icon.
Your first Web page will look something like this (if your Browser is MS Internet Explorer):
or like this (if your Browser is Netscape Navigator):
There isn't much, yet, as you can see, because you have only done the skeleton of your first Web Page - we shall need to put some meat around it.....
But first pay attention to a few things:
- You will notice the Title of your Page displayed in the blue Title Bar:
- You will see the "address" of your file displayed in the Browser Address Bar (or Location Bar):
For the time being this is a "local address" - soon it will be a real Web Address....
- You will also see that the Body of your Document begins in the top left corner of the Browser main window, except for some "padding" that the Browser automatically inserts
We shall focus on the Body area of your testpage document starting from the next Lesson (we shall put some necessary meat around the skeleton Page you have made so far....).
But, now: what is going to happen to your hard work when you shut down this Lesson and your associated learning session ?
Well, let's make the point:
You have learnt how to use NOTEPAD to write your initial HTML Code.
You have learnt how to save your testpage.html.
You have learnt how to open it (double clicking on it) to see the result of your efforts.
You know where to find your document testpage.html (in your Mywebpage Folder).
But now you are tired (and me too). So, you want to shut down everything: your NOTEPAD - your Browser - your Mywebpage Folder - and your Computer - because you had enough of them all.
But: tomorrow, or the day after (latest), you want to start all over again, and refresh your knowledge. You want to "recap" everything, and make sure you are ready for the next Lesson.
So, you start up your computer - you double click on your Mywebpage Folder to check that everything is still there - you find your testpage.html - your heart starts beating at 160 (or more) - you double click on testpage.html - and you discover that your hard work is still there; your Browser displays your first Web Page ! - you feel like a pioneer, a hero, a cybermacho ! - you check your Page inside out - it's real, it's your Page !
You suddenly remember all you had to do to create it - a bit blurred in your mind, perhaps, but you have an idea of it.
And now, you want to start fiddling around with it. You want to change your text, and see the changes - and you look for your HTML Code, the one you wrote with NOTEPAD, and - OOOOOOPPPPSSS ! - where the heck is my HTML textual Code ? How do I go back to it ? Do I have to start again from scratch, and retype everything, and.... oh, boy - oh, boy - oh, boy ???
No, no, no, sit back, relax, don't commit suicide, your textual HTML Code has not disappeared, the only problem is that you might not know how to repossess it fast.
Don't worry, I know you well, I know what you want to do.
So, while in the next Lesson I will give you a full tutorial on the subject, for the time being let me just provide you with a couple of hints on this matter.
Your HTML Code has not disappeared, because your testpage.html document is still there.
So, you may view testpage by double clicking on it - you Browser will display it.
And to recover your HTML Code, just give steam to Notepad, go to File - Open - make sure you select All Files (.*.) in Files of type: - search in the top Look in: scroll-down list until you find Desktop - Mywebpage - click on testpage - click on Open or hit Enter.
And guess what ? Your HTML Code will reappear.
Do yourself a favour, now, immediately: go to File - Save as - and save it immediately as testpage.html making sure the All Files (.*.) option is selected. Say yes when asked if you want to overwrite the existing File - and you are done !
Don't loose your Notepad, now, don't shut it down, keep it there !
And at any change you do to your textual Code, just go to Save (you do not need Save as), and see the effects of the changes you made by hitting the Refresh button in your Explorer, or the Reload button in your Netscape.
Sbangete sbangete.
More on this subject in the next Lesson, this was just to keep you alive and kicking in the meantime.
Well, that's it for this Lesson. Are you feeling OK ?
I promise you: this was the toughest of all Lessons of this Course: if you managed to follow me so far, all the rest will be a piece of cake, heh, heh.....
And no Exercises, yet - but they will come soon, huh, huh....
So, you should be ready to proceed: lots of fun coming up soon....
Bye for now !
Plan of Lessons
http://www.modus2000.com/webbuild
| Copyright © 2001/2008 Carlo Scodanibbio - All Rights Reserved |
A simple Copyright statement:
You are granted a nontransferable, personal license to use this Course on one computer station.
You do not become the owner of the Course nor do you have the right to copy (electronically or by any other means), transfer to third parties, or alter any part, code or content of this Course.
Lesson 02