This lesson is a bit long as there is a lot
of explaining to do. Most of the other lessons I expect will be much shorter.
There are four pages to this lesson. Page 1, i.e. this page contains detailed instructions
on writing a web-page. In page 2 we write a second web-page and preview Lesson 2 and Lesson 3.
Page 3 is a summary page i.e. it contains a brief summary of the steps required to write
a web-page. Page 4 is a TROUBLESHOOTING page i.e. a problem solving page.
Print out each page, finish your business on
the internet and go off-line. Have the pages beside you when attempting this lesson.
95% of the first lesson is really
on handling your computer i.e. saving files, opening files, hiding files and if you are sufficently computer
literate you should not have any great problems.
There is more than one way for doing a web-page (website) but
the way I am going to show you can be put simply as follows. You type your web-page
(as you would type any ordinary document e.g. a letter) using a program
called Notepad. You then look at this page using Internet Explorer working off-line.
Internet Explorer will show your web-page as if it were on the Internet.
If you want to make changes to your web-page then you must go back to the original page
you created using Notepad, make the changes i.e. add on more information or change or delete information
that is already there. Save the page again. You then use Internet Explorer to look at your web-page again.
The changes that you did should appear on your website (You may have to click the Refresh
Button on Internet Explorer). Later on, we will have a lesson on putting your web pages from
your own computer actually on to the Internet.
To write the web-page do the following on your computer (make sure you are off-line. There is no need or point in being on-line i.e. on the Internet for the following):
| 1. | Open Notepad. Notepad is usually found as follows: Click Start (bottom left of screen), move to Programs, move to Accessories, move to Notepad and finally click Notepad | |||||||||||||||||||||||||||||||
| 2. | You now have a blank page in front of you. You must do a little bit of typing, actually just six "words". Type in the following unusual "words". Make sure you put the < and > around the words and the forward slash / in the third, fifth and sixth words. (Leave two or three lines blank lines between these unusual or special "words"). | |||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||
| Believe it or not you have now written a web-page!!
Let's study what we have written. These "words" make up the structure of
a web-page. A web-page is made up of two sections called a HEAD section and a
BODY section. Note I do not use the < and > around HEAD and BODY when I am talking about
the sections but you must use them when you are writing the web-page.
Ignore the first word <html> and last word </html> we have written and look at the second
and third "words" we have written in above i.e. <head> </head> <head> is where the HEAD section begins and </head> is where the HEAD section ends. These two words are really only one word but the forward slash / in the second word signals the end of the HEAD section. We have left a few blank lines between the <head> and the </head> to allow us type in words or sentences in to this section if need be. However we will not be typing anything in here at the moment. Later on we will. |
||||||||||||||||||||||||||||||||
| The second section of a web page is called the BODY section.
<body> </body> As before, <body> is where the BODY section begins and </body> is where the BODY section ends. These two words are really only one word but the forward slash / in the second word signals the end of the BODY section. We have left a few blank lines between the <body> and the </body> to allow us type in words or sentences in to this section if need be. We will be typing something in here shortly. |
||||||||||||||||||||||||||||||||
| These "words" with the < and > around them e.g. belong to a computer Language called HTML. <html> at the start is just telling the computer this is the start of our HTML document and the last word </html> tells the computer this is the end of our HTML document. | ||||||||||||||||||||||||||||||||
These "words" will not appear (thankfully) on our website
when we go to look at it. What do we want to appear on our website? At the outset we said
this website was going to be about yourself. The content of your web-page (i.e. what you want people to see when they visit
your site) should be put into the
BODY section of the web-page.| 3. | Let's start typing again. Move the cursor (your writing pen)
into the BODY
section of your page i.e. somewhere in between
<body> and </body> . Let's type just one sentence for now containing our name
(you can use your own or any name you like): My name is John Paul Curran.
| | Your web page should now look like | |
| Note:When you are typing in the content of your page
you type it in as you would normally type in any other document. Do not use the < and > around the content
of your web page. The < and > should only be used with the HTML words which we will learn as we go along.
When typing in the HTML words you can use capital letters instead of small letters if you wish.
You can type <HTML> instead of <html> and <HEAD> instead of <head>
and so on. You can have one word as small letters and one as capitals. e.g. You could start the
HEAD section as <HEAD> and finish the HEAD section as </head>.
For consistency and neatness it is recommended to use either all small or all capital
letters. However later on there are one or two HTML words which should be written using small
letters. So perhaps you should write the HTML words using small letters as I have done. |
When writing the content of your web-page you use capitals or small letters as you see fit and as you want it to appear on your web-page. For us a web-page will consist of ordinary English words (and pictures later on) mixed in with these unusual words i.e words of the HTML language being careful to put everthing in the right place and being careful to write the HTML words correctly. In fact the HTML words will make up very little of our web-pages. 90% to 99% of the pages will be ordinary English i.e. the content of the web-page. 4. | Save and name your web-page. I am going to
name this page as website1. (read as website one) To do this:
| | Click File on the top left of your web page. Click Save (there is no need to click Save As) |
The Save Window appears. The file name the computer chooses for your web page is: Untitled. (Second line from bottom of window). This is not a good name for your file. Delete this name and type in: website1.html or whatever name you want to call your file but note the following: do not use spaces in the name and it is essential that you finish the name with .html (the dot . is the full stop underneath the > key). 5. | We have now written our first web-page and are finished with this page (for the time being).
We must hide this page and look at the page and see how it would appear as if it were on the
Internet. On the top right of your page are three buttons. The first one which looks like a minus
sign - is called the minimise button. (If you put the mouse over it and wait a few seconds the word
minimise will appear).
Click this button. This hides the page and puts it down on the bottom of the screen
along the row where the Start button is. |
6. | You now want to look at your web-page as it would appear
as if it was on the Internet. Double-Click Internet Explorer or whatever browser (Internet Explorer is called a browser) you use
to go on the Internet. You should be given an option of whether you want to work off-line or
whether you want to go on-line i.e. actually on the Internet.
Choose Off-Line (You may have to click off-line a number of times.)
We now must find and open the page we created. On the top left
of the Internet Explorer page do the following:
|
Click File, click Open, click Browse. In the little window that appears find and click the file name that you created. (Note the .html will not appear on the file name). The file name should now be highlighted. Click Open (bottom right of window), another little window appears, with something like: C:\My Documents\website1.html in the window. Click Ok. Your web-page should now appear with only the content showing i.e My name is John Paul Curran. The HTML words, i.e. <html>, <head> etc. should not appear. 7. | Suppose I now want to add another sentence to my web-page.
I want to let people know where I live. Hide your web-page on Internet Explorer i.e. on the top
right of Internet Explorer click the minimise button. Look along the bottom of your screen i.e.
along where the Start button is. You should see the name of your file followed by the name Notepad.
This is where your file is hidden when you clicked the minismise button (in Notepad). Click the name of your
file and you should have back on the screen the page where you wrote your web-page. Go to the end
of the first line and type in the second sentence of your web-page. Your page should look like
| < html> |
<head> </head> <body> My name is John Paul Curran. I live in Valentia Island, Co. Kerry. </body> </html> | Save the web-page again. Just click File and Save.
Hide this file again i.e. click the minimise button. Bring back your web-page using Internet
Explorer (click the name at the bottom of the screen where the Start button is. It will look like
C:\My Documents\website1.html). Your old web-page appears. Click Refresh.
Your updated page should appear.
|
| Go back to your original page, add more content. Save the page.
Look at the page again using Internet Explorer. Keep repeating these steps.
Your finished page could look something like | <html> |
<head> </head> <body> My name is John Paul Curran. I live in Valentia Island, Co. Kerry. I am 99 years old. I drive a black Opel Astra car which is nearly as old as myself. My hobbies include fitness training and playing Golf. </body> </html> 8. | To finish up, before turning off your computer close all files.
Clicking the last button on the top right of any page
i.e. the x button will close a file. |
| | ||||||
TIP: You might well be asking yourself, why not type in all the content in one go,
rather than sentence by sentence. Sure you can, but doing it sentence by sentence will give
you the essential practice
of going back and forth from where you wrote the page to seeing how the looks as if on the Internet.
This is crucial to this method of doing websites and becomes quite easy with practice.
If you type in all or most of the content in one go then you will going back and forth
from where you wrote the page to seeing how the page looks on the Internet only one or twice.
This way you will be going back and forth more often. When you get comfortable with going
back and forth you can write in more content in the one go.
Also when things go wrong (they almost certainly will) and the content is not appearing
as you want it, it will be easier to find and solve any problems
if you have just written it one or two sentences at a time.
Note: You will quickly come to realise that doing websites this way is more or less the same as writing a letter or any other document. This is not to say that doing websites this way is very easy. Things get a bit more interesting and challenging in some of the other lessons. We must learn what these unusual "words" of the HTML Language are, when and where to use them. In this course we will only have to learn around 20 of these words. We have already learned 3 of these words, <html>, <head>, <body>. We will learn another word in page 2. After doing a few lessons (if you do the course), you may wish to and should consider getting a book on HTML. In page 2 we will write another website and look ahead to Lesson 2 and Lesson 3.
On to Page 2 Back to Introduction Page