Lesson 1 - Page 2
Your Second Website
Now that a lot of explaining has been done, let us write a second web-page. Suppose we want
to list the counties of Munster down the page (not across the page) on a web-page.
(Don't ask why we might want to do this.)
When we look at the web-page
using Internet Explorer it should look like:
Kerry
Cork
Clare
Limerick
Tipperary
Waterford
To do this as before, open Notepad and type in the Structure of a web-page.
Your page should now look like
<html>
<head>
</head>
<body>
</body>
</html>
Type the content into the BODY section. Press the Return Key at the end of each
County to put the counties on a different line. Your Notepad page should now look like:
<html>
<head>
</head>
<body>
Kerry
Cork
Clare
Limerick
Tipperary
Waterford
</body>
</html>
Save the file using a suitable filename e.g. munster.html and press the minimise
button to hide the page for the time being. Open and look at your page using Internet Explorer.
However the counties will appear across the page despite the fact that we put them down the page
when writing the website.
They will appear as: Kerry Cork Clare Limerick Tipperary Waterford.
It is not sufficent to put the words on a seperate line when writing the web-page.
You must add on an extra word of the HTML language between any words or sentences
that you want to appear on seperate lines. This word is: <br> (i.e
the letter b followed by r, think of BREAK i.e
break these words into seperate lines). <br> means: start a new line.
Bring up on the screen the page where you wrote the web-page. Insert <br> as
shown below. Your page should now look like
<html>
<head>
</head>
<body>
Kerry <br>
Cork <br>
Clare <br>
Limerick <br>
Tipperary <br>
Waterford
</body>
</html>
Save the file. Hide this page. Look at your page again using Internet Explorer.
The counties will appear down the page each on a seperate line. You may have to click the REFRESH BUTTON on Internet Explorer.
Note: There is no </br> word in HTML.
Exercise: Write a web-page that displays (when you look at it using Internet Explorer)
the members of your family (make up five or six names if necessary)
down the page.
Exercise: Write a web-page that displays the counties of Connaught
down the page with a blank line between each county. When you look at the page using Internet Explorer
it should look like:
Galway
Mayo
Sligo
Roscommon
Leitrim
Suppose you now decide you would like a heading for the page say COUNTIES OF CONNAUGHT.
This should come on top i.e. first. Go back to where the web-page and insert this line in
the correct place.
Your finished page should look like in Internet Explorer as:
COUNTIES OF CONNAUGHT
Galway
Mayo
Sligo
Roscommon
Leitrim
Finally suppose we want the heading i.e. COUNTIES OF CONNAUGHT to appear in the center of the screen.
In your original web-page in Notepad, push the heading out roughly to the center of the screen
or delete the heading and rewrite it towards the middle of the screen. When you have this done save your file
and look at it using Internet Explorer. Will the heading display in the center of the screen?
No, we will learn why in the next lesson.
If you have followed this first lesson then as time permits
you should practice writing 4 or 5 or more small websites. Write a website about your local
area, a website about your local GAA or soccer
team. Put in the results say of their last three matches. These results will be easier to read
if they appear down the page. Write a website about that house you have to let, your business etc. Keep the content
to about six or seven sentences. When saving the files call them different names.
Writing the structure of a web-page and the process of going back and forth between where
you write the web-page using Notepad and where you view your web-page using Internet Explorer should
become second nature to you.
Preview of Lesson 2: Improving the look and style of our websites and the presentation
of the content will be an on-going process throughout most of the lessons. Lesson 2 will
show us some ways for doing this. As a taste of what is to come, make a small change to one or
more of your websites as follows.
Change the word <body> to <body bgcolor="red"> and see what happens to your web-page.
Change red to other colors.
Note the quotation marks around the color. Note as well you
must spell the HTML words and the color correctly.
The following are some incorrect ways for writing the above:
<body bgcolour="red"> bgcolor spelled incorrectly.
<body bgcolor="redd"> red spelled incorrectly.
<body bgcolor "red"> No = sign.
<bodybgcolor="red"> body and bgcolor joined together i.e. no space between them.
<body><bgcolor="red"> bgcolor="red" must be put into <body>
When Internet Explorer is going to display your page that you wrote using Notepad it looks
at these HTML words and interprets them to mean something special. If the words are spelled
incorrectly or
things are not written as they should, then Internet Explorer either ignores them or may
interpret them incorrectly and what you meant to appear on your page may not appear.
You can get unexpected results. As an example when I spell red as redd, I get a green color!
and when I spell red as re d (i.e. a space between e and d) I get a
black color! Note if you want a green or black background to your page use the words green or black.
In Lesson 3 we will learn the critical and all important step of
linking the pages of your website. We will write websites with at least two pages
and learn how to put a link in the first page so that when a user of your website clicks
on the link it will bring him or her to the second page. We will also put a link
on the second page to take him or her back to the first page.
On to Page 3
Back to Page 1
Back to Introduction Page
Copyright © John Paul Curran