DIFFERENT WAYS OF CREATING WEBPAGES
DIFFERENT
WAYS OF CREATING WEBPAGES
As you
now know, there are various ways of creating webpages. We have seen how
you can create webpages using:
·
Hot
Potatoes
·
Word
·
FrontPage
Express.
There are
other ways too. Here is an explanation of the main pros and cons of the
different methods.
1.
Word
One of
the easiest ways of producing a webpage is to write your page in Word and
then save it as a webpage (click on the File menu and choose Save as
HTML).
Unfortunately, webpages are not built in the same way as Word pages and
you often find that what you created in Word doesn't look quite the same
when it is transformed into a webpage.
Another
problem with webpages created in Word is that the code produced is rather
dirty, which means that it contains quite a bit of extraneous stuff
which Word puts in without you asking it to. Moreover, some browsers
don't display pages produced in Word very successfully. On the other
hand, since many teachers around the world use Microsoft products,
including Word and Internet Explorer, this is not quite as severe a
problem as it might seem.
Despite
the problems just referred to, Word is a very quick way of producing a
webpage and many people already have Word installed on their computer. If
you know how to edit HTML, either directly, or using some sort of an HTML
editor (which we will talk about in a moment), then one approach to
writing webpages that I have found very useful is to write them in Word
(because it is so fast) and then clean up the code. However, that was
before I got to grips with FrontPage Express, of which more in a moment.
2.
WYSIWYG
HTML editors like FrontPage
WYSIWYG
(What you see is what you get) HTML editors make life easy because you
write the page in something that looks very similar to an MS Word document
and the program creates the underlying HTML code for you automatically.
You can still have access to the code if you want, but for the most part
you can leave HTML up to the program and concentrate on producing the
content and layout of your webpages. This of course is highly desirable
for teachers who are interested in producing a product for the learning
and teaching of English rather in than the intricacies of HTML.
Two good
examples of WYSIWYG editors are FrontPage Express which was bundled free
as part of Internet Explorer (up until version 5.0) and Netscape Composer
which is bundled free with the Netscape browser. (In Netscape 6.2, click
on Tasks and choose Composer. It works in a similar way to
FrontPage Express.
Like
Word, these have the drawback that they produce rather dirty code,
but again, since they are so quick and easy to use they are fantastic
tools for teachers. And they are free.
Note,
there is a commercial version available of FPE called FrontPage which you
have to pay for. This has more features than the Express version, but for
anyone starting out in webpage creation, FPE is fine.
3.
On-line
editors
A number
of sites on the web will help you to build your own site without knowing
any HTML. I do not have any experience of using them, but apparently they
are quick and easy to use. Examples are:
·
Homestead
http://www.homestead.com
·
Tripod
http://www.members.tripod.com
·
Yahoo
Geocities
http://geocities.yahoo.com/
(Enter your Yahoo ID and password and then click on Yahoo
PageWizards or Yahoo Pagebuilder).
These
have the advantage that once you have created your webpage, you don't need
to know how to upload it to the Internet as the site will do this for
you. On the downside, you have to be online to use these (not a good
option if you have a dial-up connection and are paying the phone bill).
My experience has also been that they create pop up adverts which can be
rather annoying for a user looking at your site.
4.
Other
commercial products
For
people who want to get serious about webpage design, then one of the
commercial programs which has received a lot of praise is Macromedia's
Dreamweaver - this is a professional webpage design tool. (Macromedia
website is at
www.macromedia.com)
However, for most teachers new to webpage creation, I would advise them to
start with a free tool which is easy to use, ie FrontPage Express or
Netscape Composer.
5.
Creating
Webpages in Notepad
This is
not as complicated as you might at first think, but it is very time
consuming and there is a steep learning curve if you want to produce
sophisticated webpages. I think it is important for teachers to
understand how HTML works so that you can edit it if necessary, but I
doubt that most English teachers will want to produce webpages like this
once they have been introduced to WYSIWYG editors. If you want your
students to create their own webpages, then Notepad is a very slow way of
doing what you can do much more quickly and comfortably using FrontPage
Expres of Netscape Composer.
6.
Non-WYSIWYG
HTML Editors
These are
a sort of half-way house between writing HTML code in Notepad and using a
WYSIWIG editor. They allow you to have complete control over the HTML
code which you create (so you can avoid dirty code), but they also
take some of the pain out of HTML by allowing you to add code snippets
automatically and by using colour-coding so that it is easier to see the
code when you are editing it.
SO, WHICH
TOOL TO USE?
Which
tool you use to create webpages is really a matter of personal choice.
However, for busy teachers new to webpage creation, I would recommend
FrontPage Express or Netscape Communicator as they are:
·
Free
·
Easily
available (especially Netscape Communicator)
·
Very easy
to use
·
Can be
used by teachers and students
I also
think it is a very good idea for teachers to have a working knowledge of
HTML.
BEFORE
YOU START
Before
creating a website, it's very important to have two things:
1.
Something to say
2.
A plan of your site
1.
Websites are only interesting if they have some interesting
content. This must take precedence over fancy design features like
dancing text. You obviously need to decide what you are going to use your
website for.
2.
Websites comprise a number of webpages all linked together.
Creating and maintaining these links can get very complicated, which is
why it is good to have a plan at the outset.
For the
purposes of this course, I have decided both of these. When you come to
create your own site, these will be crucial points you will need to decide
on before starting, but I think this will become clearer once you have
created your FPE page.
![](_themes/blitz/btzhsepa.gif)
CREATING WEBPAGES (1)
SINGLE
PAGE IN FRONTPAGE
SO, HOW
DO WE CREATE A WEBPAGE?
There are
in fact many different ways of creating webpages, but in this session we
are going to use a program called FrontPage. I’ve chosen this program as
it is now widely available and if you are used to using MS Word, then it
is very familiar.
FrontPage
is a webpage editor, which means that you can use it to create and edit
web pages. It is also a WYSIWYG webpage editor, which means what you see
is what you get, ie when you are creating a webpage, the way it looks on
your screen is (pretty much) what it should look like once you put it on
the web.
Now, all
webpages are written in HTML - ELICIT MEANING: Hypertext Markup Language.
HTML is
simply a series of codes which tells your browser how to display a given
webpage. If you want to get serious about creating webpages, there will
come a time when it becomes essential to learn some HTML, but the good
news is that you can create basic websites with almost zero knowledge of
HTML.
STARTING
OUT: CREATE A SHORTCUT TO FRONTPAGE
Before we
start using FrontPage (FP), we are going to create a shortcut to the
program on the desktop so that it is easier to access. To do this, click
on the Start button, click on All Programs, select
FrontPage and right click on it. Choose Send to and then
Desktop (create shortcut).
Now open
FP from the desktop using the shortcut button you have just
created.
If you
look at the top of the screen, you will see that some of the icons are
immediately recognisable.
To start,
select "File / new /
file or web" and
open a
one-webpage site.
POSITIONING TEXT ON THE PAGE WITH A TABLE
First of
all, before we start entering any text, we are going to make sure that our
text does not cover the whole screen when we look at it in a browser. To
see why, compare a story on the BBC’s web page with this page from Vance
Stevens -
http://www.geocities.com/vance_stevens/papers/index.html (Actually,
Vance has some very interesting stuff on his website).
To avoid
our text covering the whole screen, we are going to start by creating a
one-celled table covering 80% of the screen in which to place all our
content. This is to avoid our text covering the whole width of the screen
To do
this, click on the Table menu, click on Insert and then
Table. Select one row by one column, choose centre alignment,
zero border size and specify the width at 80%. Then click OK
and a cell with a dotted line around it should appear in your document.
(This will not be visible in your webpage.)
ADDING
TEXT
Click
anywhere inside the box (table) and write the title, that is your first
name and your surname, eg "Phil Brabbs". Then press Enter once (NB you
will note this starts a new paragraph, not a new line. This is one
difference between FP and Word.)
Write
“Back to Course Homepage”
Click on
the Insert menu and select Horizontal Line
SAVING
THE PAGE
Before we
do anything else, let's save the document. As this is the first time you
have saved the document, you can click Save or Save As on
the File menu (or just click the Save icon which looks like
a floppy disk).
When the
Save As dialogue box appears on screen, enter the title of your
page in the Page title box - type in your name as the title. (This
is what will appear in the browser address window at the top of your
browser when the page is open.) Then click on As File as we want
to save this document as a file on our hard disk. The Save as
dialogue box will open.
Select "My documents" and your folder
as the place where you want to save the file.
Next you
should enter the name of the document in the File name box. Now, because
this is your first webpage, FP automatically calls it index (no
caps). The first page (homepage) of any website should always be called
index because this is what internet browsers look for when you type in the
address of a website.
Click on
Save. Now close your document before you go on to
the next section.
Check to
make sure you have successfully created your index page by going to your
floder
and checking there is now a file there called “index”.
VIEWING
YOUR PAGE IN YOUR BROWSER
You can
now see how your page will look as a webpage by opening your website
folder and double clicking on the index page. This should open the
document in your browser.
The text
should look something like this:
Your name
Back to Homepage
________________________________________________________________
ADDING
YOUR OWN CONTENT
You now
need to reopen the index page in FP. NB double clicking on it will not be
suitable, as this will open the page in Internet Explorer. This is fine
for viewing the page, but it will not let you change it. For this, you
need a web editor like FP.
So, open
FP (by clicking on the shortcut on the desktop), then click on the open
folder in the top left hand corner of the screen , to the right of the
white page icon we clicked on earlier, and the Open File dialogue
box will open. Click on Desktop and then double click on the folder
containing your index page. When you can see the index page icon, click
on Open. You can now continue to create this file.
Position
your cursor at the right hand end of the horizontal line and press the
Enter key on your keyboard once. You are now ready to enter your own
text. Don't worry about formatting at this stage, we will do that in a
moment.
Create your own text
introducing yourself and describing one of your hobbies.
When you
have done that, finish off the page by adding another horizontal line and
the words “Back to Course Homepage”. You should now have something like
this:
Your name
Back to Course Homepage
________________________________________________________________
(Your
text)
________________________________________________________________
Back to Course Homepage
Save your
work.
FORMATTING THE TEXT
Formatting text in FP is easy as it is almost like doing it in Microsoft
Word - simply highlight the text you want to format and click on the icons
on the toolbar at the top of the page. Format your text now, by using
centre, bold, increasing/decreasing the size of the text and changing the
colour of the text.
CHANGING
THE BACKGROUND AND TEXT COLOUR
By
clicking on the Format menu and selecting Background, you
can also change the background colour of your page and the text colour.
Experiment!! (and use the undo button to get rid of colour schemes you
don’t like).
ADDING A
PICTURE
Use a
search engine (like Google) to find a suitable picture to illustrate your
hobby. (Save the URL of the site where you found the picture by pasting
it from the browser address window into a new blank Word document as you
will need it in a moment). Find the biggest version of the picture you
can and then right click on the picture and choose Save Picture As.
Give it a short name (no caps, no spaces – this is very important),
make sure it will be saved as a .jpg or .gif file and save
it in the same folder where your index page is saved.
Next go
back to your webpage in FP put your cursor in the place where you would
like the image to appear. Click on the Insert menu and choose
Picture, then From file. (A quicker way to do this is to click
on the Insert Picture icon which looks like a yellow postcard on
the toolbar at the top of the screen). Use Browse to find the
file, click on it and click Insert. The picture should appear in
your webpage. You should be able to resize it by clicking on it and
dragging one of the corners in the usual way.
ADDING A
CAPTION TO THE PICTURE AND INSERTING A LINE BREAK
When you
add a caption to your picture, you will want to make sure the text appears
immediately below the picture, ie you need a line break after the picture,
not a new paragraph. To make a line break in FP hold down the Shift
key when you press Enter.
Now place
your cursor after the picture and create a line break. Add a suitable
caption for the picture. Then insert another line break and add the words
"I found this picture here" in brackets. The word "here" is going to be a
hyperlink to the site where you found the picture.
ADDING A
LINK TO AN EXTERNAL WEBSITE
Now, go
back to the Word document where you saved the URL of the site where you
found your picture. Highlight the address and copy it. Then go back to
FP, highlight the word "here" underneath your picture and click on the
Insert menu and select Hyperlink. When the create Hyperlink
dialogue box opens, paste the web address of the picture into the
Address box, which is near the bottom of the Insert Hyperlink
dialogue box. Click on OK.
The word
“here” should now be blue and underlined, indicating it is a hyperlink.
TESTING
THE LINK
To check
to see if you have inserted the link correctly, run your mouse over the
link (without clicking on it) and you should see the URL which it links to
appear in the bottom left hand corner of the screen.
Or, more
excitingly, click on Preview in the bottom left hand corner of the
screen, and then click on the word here and you should jump to the website
where you found your picture.
To go
back to your own page, click on
Normal,
to the left of the word Preview.
To finish
off this part of the page, click on the Insert menu and select
Horizontal Line.
ADDING
ANOTHER LINK TO AN EXTERNAL WEBSITE
Put your
cursor at the end of the bottom horizontal line and press Enter.
Now enter the text: “Here is the website of my
school”.
Now use
Google to do a search to find the website of your
school
and copy
the URL.
Go back
to your index page, and create a link to this website in the same way that
you created the link to the site where you found the picture relating your
hobby above.
Test the
link as you did before.
CREATING
AN ARROW TO GO TO THE TOP OF THE PAGE
We are
now going to create a navigation arrow at the bottom of the page to give
readers a quick way of jumping back to the top of the page. We will do
this in 3 stages:
1.
Insert the arrow
2.
Create a bookmark at the top of the page
3.
Create a hyperlink in the arrow to go to the top of the page
bookmark.
1.
Insert
arrow
Let's use
the blue arrow in the resources folder on the shared drive for this.
Find an image called "arrowupblue"
using google, copy the file called arrowupblue and save
it in the folder where your webpage is saved.
Then go
to your webpage in FP, put your cursor where you would like the arrow to
appear (right at the bottom of the page) and click on the Insert
menu and choose Picture, then From file. Browse till you
find the arrow image, highlight it and click Insert. The arrow
should appear in your page.
2.
Create a
bookmark at the top of the page
To create
a bookmark at the top of the page, position your cursor at the top of the
index page-, just to the left of the title. Click on the Insert
menu and select Bookmark. Where it says Bookmark name, type
in "topofpage" (no capitals, no spaces) and click OK.
A little blue flag should now appear to the left of your title, indicating
that a bookmark has been inserted.
3.
Create a
hyperlink in the arrow to go to the top of the page bookmark.
The final
stage is to create a hyperlink in the arrow at the bottom of the page
which will jump to this bookmark. To do that, scroll down to the blue
arrow you inserted in stage 1 and click on it to select it. Then click on
the Insert menu and select Hyperlink. When the Inset
Hyperlink dialogue box opens, click on Place in this Document
on the left hand side of the window and you should be able to see you
“topofpage” bookmark joined to Bookmarks by a dotted line. Click on
“topofpage” and then click on Screentip in the top right hand corner of
the window. In the box marked Screentip text, type Go to top of
page. Now click OK.
TESTING
YOUR TOP OF PAGE ARROW
You can
test your top of page arrow, by clicking on Preview again (bottom
left hand corner). Put your mouse over the arrow, but do not click.
After a few seconds, a little yellow tip should appear saying Go to top
of page. If you then click on the arrow, you should jump to the top
of the page (you will probably just see the page jump slightly).
CENTRING
EVERYTHING
Finally,
to make all the text and graphics move to the centre of your page, click
anywhere on your index page, hold down Ctrl and press “A”. This should
highlight the whole page.
Now click
on the centre text icon at the top of the screen.
Congratulations!!!
![](_themes/blitz/btzhsepa.gif)
![From single page to website](creatingwebpages_archivos/image001.gif)
Your webpage is called index.
Create a new folder in your folder. Its name will not have any
capital letters or spaces or symbols. It might be called your initials.
The name of this folder could become part of the URL, depending on how you
upload your site to the web.
In Frontpage, open your home page from your new
folder