61
4
Viewing the Codes
You saw earlier the codes behind a complex web page. Take this opportunity to look at what’s
behind your own, very simple, page:
1.
Move to Internet Explorer by clicking on its icon on the Task Bar at the bottom of the screen
2.
Press <Ctrl o> to open your file
3.
Click on [Browse…] and change Look in: to your_username (\\ndrive) (N:)
4.
Open the public_html folder and select index.htm
5.
Press <Enter> for [Open] and again for [OK]
6.
Now right click in the background and select View Source
At first sight, the codes look very complicated for such a simple web page. One disadvantage of
using Word (as against programs solely used for web design) is that it creates a lot of extra code
(even if you choose the Filtered file type). The web page would work equally well if you were to
remove these extra codes.
At the very top, <html> defines the type of codes being used, while </html> turns this off at the
very end. In between, there is a <head> (which includes metadata and, here, font and style
definitions),
7.
Move down to the end of the codes (using the scroll bar)
At the end of the file is the <body> which includes all your text. Surrounding your heading are the
codes <p> and </p> which denote the start and end of a paragraph. This is followed by </body>
and </html>.
8.
Close the Original Source window by clicking on the [Close] button
9.
Minimize the Internet Explorer window by clicking on its [Minimize] button
Note that your words aren't yet a web page - they are just held in a file with special additional codes
which can be interpreted by a browser. Only when you publish your information so that other
people can read it does it become a true page on the WWW.
Adding Formatting
Your Home Page is not only very short but also very plain. In this next exercise you will add some
more text and start including formats - like bold text and headings.
1.
Check the insertion point (flashing vertical line) is at the end of your first line of typing
2.
Click on the [Heading 1] button in the Styles group on the Home tab to make your text bigger
and bolder. This also colours it blue (you can pick a different colour later)
3.
Centre your text by clicking on the [Center] button (in the Paragraph group)
4.
Press <Enter> to turn off the heading style (and return to Normal style) and again to separate
the heading from any following text
You may not be familiar with styles but they are very useful in preparing web pages (and in larger
Word documents). By choosing particular styles for your headings and other special features, you
can maintain a consistency across your web pages (or thesis, for example). Next, type in some more
text.
5.
Type in a real or rubbish (ie not real words but with spaces) paragraph of about 3 lines
6.
Press <Enter> at the end of the paragraph
7.
Repeat steps 5 and 6 for a second short paragraph of at most 2 lines
8.
Make some of the words in the paragraphs bold or italic by double clicking to select the word
and then clicking on the [Bold] or [Italic] button (in the Font group)
58
5
9.
To embolden or italicise several words, you must select them first by dragging through them.
You can also turn bold etc on/off as you type. It is not a good idea to use underline to make
text stand out on a web page as this usually suggests a link to another page.
10.
Press <Ctrl s> to [Save] your changes – press <Enter> for [Yes] to confirm the filtered format
11.
Click on the [Internet Explorer] tab on the Task Bar and [Refresh] (the button with 2 blue
arrows) the screen to see the changes
Tip: The quick way to refresh a web page is to press key <F5>.
12.
Now right click in the background and select View Source
13.
Scroll down to the bottom to see the new codes
Note all the new HTML mark-up codes which have been added to your file. You do not need to memorize
these, but it's helpful if you can understand what's happening. <b> turns bold on; </b> turns it off. <i> does
the same for italic. <h1...> introduces your heading, </h1> ends it. align=center centres the heading.
14.
[Close] the Original Source window and [Minimize] Internet Explorer to return to Word
Tip: For those of you who will go onto designing web pages for a department, club or company, you
will be faced with issues of accessibility. It is recommended that you use <strong> and <em> (short
for emphasis) instead of <b> and <i>, respectively. To put these codes into your document, select
the text you want to format, click on [More] button attached on the right of the Styles – you’ll find
Strong and Emphasis listed. Note that there’s also several associated styles (eg Intense Emphasis if you
want something to be both bold and italic).
Adding Lists and Lines
Numbering:
Bullets:
Lists are a very precise way of showing information on web pages and also look attractive. Lists can
be numbered or bulleted (various characters or even images can be used for bullets). If you are used
to creating lists in Word, the next exercise should be very familiar to you:
1.
Check you are on a new line at the end of your text (press <Ctrl End> then <Enter>, if
necessary)
2.
Type Here are links to my other web pages: and press <Enter>
3.
Click on the [Bullets] button in the Paragraph group
4.
Type in some headings for your other pages (eg My Family, My Friends, My Interests), pressing
<Enter> at the end of each line
5.
Press <Enter> once on an empty bulleted line to turn the bullets off
To change the look of the list:
6.
Drag through the list then click on the arrow attached to the right of the [Bullets] button
7.
Choose a different symbol from the Bullet Library
Finish off this section with a line across the page:
8.
Press <Ctrl End> to move to the end of your document
9.
Click on the arrow attached to the right of the [Borders] button in the Paragraph group and
choose Horizontal Line
If you want to change the look of the line:
10.
Click on the line (to select it) then right click and choose Format Horizontal Line…
48
6
11.
Under Size change Width: to 50% , increase the Height: to 3pt and turn on Use solid color (no
shade)
12.
Press <Enter> or click on [OK]
13.
Press <Ctrl s> to [Save] your changes – press <Enter> for [Yes] to confirm filtered format
Your Home Page should be looking quite good now. You can look at the new HTML mark-up codes
which have been added, if you want, by using the same procedure as before. The codes usually used
for a list are <ul> to turn on bullets (u stands for unordered or if you had a numbered/ordered list you
would see <ol>) - and </ul> to turn them off. Within these codes, <li> is used for each list item. In
Word, however, the MSO list paragraph style is used instead. A horizontal line is marked by the single
code <hr> (with any additional properties such as width=”50%” following inside the brackets).
Adding Colour
Font Color:
In this next section you are going to add colour to your web page. This is a very easy thing to do, yet
it should make your page much more interesting (but take care not to use too many different
colours as this can make it difficult for those with poor eyesight to read). Colour can be added to the
overall background and to text and tables (including the lines).
1.
Click three times on your main heading (or drag through it), to select it, then click on the list
arrow attached to the [Font Color] button and choose a different colour
2.
Repeat step 2 for other pieces of text on your page (to colour the bullets, select just the hidden
paragraph mark at the end of each bulleted line)
3.
To set a background colour, move to the Page Layout tab on the Ribbon and click on [Page
Color] in the Page Background group – choose the colour you require
Note that you aren't restricted to the default set of font and background colours. If you click on More
Colors... you have a much wider range. You can also use an image (ie any picture) as a background to
a web page, though these are often not so good for accessibility. It’s best to make any background
image light or transparent.
4.
Press <Ctrl s> to [Save] your changes – press <Enter> for [Yes] to confirm filtered format
The HTML mark-up codes for colours are <...color="#hexadecimal number"> for text colours and
<...bgcolor="#hexadecimal number"> for the background page colour.
Adding Tables
Insert Table:
It’s best to use a single background colour for your web page (though Fill Effects allow you to use
more). To add more colour, use tables with different background colours. If you want a whole
section to appear with a different colour, a simple way is to set up a table with just a single cell (ie
one row and one column) and then type your text into that cell. In this next exercise you are going
to set up a table, with several rows/columns.
1.
Move to the end of your existing text (press <Ctrl End> then <Enter>, if necessary)
2.
Move to the Insert tab then click on the [Table] button
54
7
3.
Drag across the first 3 cells to create a table of 3 columns by 1 row then click the mouse
button
You can now fill in the cells. Use <Tab> to move between the cells, which expand vertically as you
type in text or press <Enter>.
4.
Type something into each cell (eg Name, Address and Phone)
5.
Press <Tab> at the end of the first row and a second row will automatically appear
6.
Type in your own details, pressing <Tab> to move between the cells
You'll find that the default for a table is for the columns to be of equal width, and that a line of your
address may be split over two lines. You can alter the width of a particular column by positioning
the mouse cursor on the right-hand border (it becomes a double-headed arrow), holding down the
button and moving the mouse to left or right. When you let go of the button, the column is resized.
You can also double click to fit the column to the data.
7.
Double click on the right-hand border of each column to fit it to the data
Next set up justification and the required table background colour and borders:
8.
Select row 1 (drag through the cells or click in any cell then, on the Table Layout tab, click on
[Select] and Select Row) and make it bold and centred by pressing <Ctrl b> for [Bold] and <Ctrl
e> for [Center]
9.
Next, click on the table indicator (the small square which appears at the top left of the table as
you move the mouse over it) to select the whole table – you could also use the [Select] button
and Select Table
10.
In the Alignment group on the Layout tab, set the alignment required (eg [Align Center])
11.
Next click on the [Properties] button on the left and, on the Table tab, click on [Borders and
Shading]
12.
Here, set the required Border Style, Color and Width
13.
Next, move to the Shading tab and set the required Fill colour for the whole table – click on
[OK] twice
Note that each cell (row or column) can have its own distinct colour, if you want:
14.
Finally, centre the whole table on the page by pressing <Ctrl e> (or move to the Home tab and
click on the [Center] button)
15.
Press <Ctrl s> to [Save] your changes – press <Enter> for [Yes] to confirm filtered format
You can have a look at the HTML code used for a table, if you like, but it's quite complicated and not
so easy to understand.
Linking to Other Pages
Earlier in this document it was mentioned that a well-designed web site should have relatively small
pages of information, with links to further pages where necessary. The very idea of a web is that
there are links from one place to another and that these can be quite complex. In this next section
you will see how to create links both between and within web pages.
Linking to your Own Pages
Insert Hyperlink:
Start by linking to a second web page of your own. First, you need to create the second page.
53
8
1.
Drag through the words My Interests in the bulleted list to select them
2.
Right click on the selected words and choose Hyperlink… (or use [Hyperlink] on the Insert tab)
The following window will appear:
3.
Click on [Create New Document] on the left hand side of the Insert Hyperlink window
4.
Name the new document interests.htm then press <Enter> for [OK]
This saves the file using the default, complex, format. To change to a filtered format:
5.
Click on the [File] tab and choose Save As
6.
Change the File Type to Wed Page, Filtered (*.htm, *.html) then press <Enter> for [Save]
7.
Click [Yes] to overwrite the current file and [Yes] again to confirm the filtered format
8.
Now type in a heading of My Interests setting a style, justification and colour
9.
Press <Enter> and type in a paragraph and/or a list explaining what you are interested in (be it
work or pleasure)
10.
Set a background colour – move to the Page Layout tab, click on [Page Color] and choose a
colour (maybe different from your home page background colour)
11.
Press <Ctrl s> to [Save] your new page– press <Enter> for [Yes] to confirm filtered format
Now that you have a second web page, you can test out the link to it from your Home Page:
12.
Move back to your Home Page by clicking on the index.htm tab on the Task Bar
13.
Press <Ctrl s> to [Save] the new link to my interests– press <Enter> for [Yes] to confirm the
format
14.
Click on the Internet Explorer tab on the Task Bar and [Refresh] the screen (or press <F5>)
15.
Click on My Interests to test out the link
You now need a corresponding link back to your Home Page from the My Interests page:
16.
Click on the interests.htm tab on the Task Bar to return to your Interests Page
17.
On a new line at the end of the My Interests page type: Back to my Home Page
18.
Drag through the words Home Page then right click and choose Hyperlink…
19.
Click on [Existing File or Web Page] on the left hand side of the Insert Hyperlink window
20.
Choose the file index.htm then press <Enter> for [OK]
21.
Press <Ctrl s> to [Save] your changes – press <Enter> for [Yes] to confirm filtered format
22.
Click on the [Internet Explorer] tab, press <F5> to [Refresh] the screen and test out your links
You should now be able to move freely, back and forward, between your two pages.
64
9
Linking within your Own Pages
The simple links you have set up so far always take you to the top of your web pages. You can also
create links which take you to a named point part-way through a page by using a bookmark.
1.
Return to your Home Page - click on the index.htm tab on the Task Bar
2.
Click to set the insertion point at the start of the line introducing the bulleted list
3.
On the Insert tab, click on [Bookmark] in the Links group
4.
Type links as a Bookmark name:
5.
Press <Enter> for [Add]
6.
Press <Ctrl s> to [Save] your page– press <Enter> for [Yes] to confirm filtered format
7.
Click on the interests.htm tab to move to your My Interests page
8.
After the words Back to my Home Page type: or links to my Other Pages
9.
Select the words Other Pages then right click and choose Hyperlink…
10.
Select the required file (index.htm) then on the [Bookmark...] button
11.
Click on links under the heading Select a bookmark in the Web page:
12.
Press <Enter> for [OK] - note the form of the address (index.htm#links)
13.
Click on [OK] to complete the hyperlink definition
14.
Press <Ctrl s> to [Save] your changes – press <Enter> for [Yes] to confirm filtered format
15.
Click on the [Internet Explorer] tab, [Refresh] the screen and test out your links
This new link would open up the Home Page with Here are links to my other web pages: showing at the
top of the window, if the page was longer than a single screen. The Home Page link shows the page
from the first main heading.
This particular example showed you how to link to a bookmark in another page. Bookmarks are
more usually used to create links within longer pages, with a Contents List provided at the very top -
just like in this document.
Linking to External Pages
It's equally simple to provide links to other pages of information, anywhere in the world. Try adding
a link to the University Home Page.
1.
Return to your Home Page - click on the index.htm tab on the Task Bar
2.
Press <Ctrl End> to move to the end of your page then type: To the University of
Reading Home Page
3.
Drag through the words University of Reading Home Page to select them the right click and choose
Hyperlink…
4.
In the Address: box type: http://www.reading.ac.uk/
5.
Press <Enter> or click on [OK] to create the link
You can test this hyperlink our later. In this example you linked to another site by typing in its
Address (URL); you can also insert a link automatically. Try this next.
6.
Press <End> to move the insertion point to immediately after the link to the University Home
Page then press <Enter > for a new line
7.
On the new line type: To the Library Catalogue
8.
Drag through the words Library Catalogue, then right click and choose Hyperlink…
57
10
You now have to supply the Address for the page. There are two methods to do this: (a) if you have
already visited the required web site today you can use the [Browsed Pages] button or (b) if you
haven't been to the web site you can do so now by clicking on the [Browse the Web] button.
Browse the Web:
9.
Click on the [Browse the Web] button - an Internet Explorer window appears
10.
If necessary, change the Address: to http://www.reading.ac.uk/student or /staff
11.
Using the Quick Links on the left hand side, click on Library
12.
Next click on the link to the Login to Unicorn (in the middle column under Your account) then
on [OK] to the Security Alert
13.
Return to index.htm (via the Task Bar) and you'll find the Address has been filled in for you
14.
Press <Enter> or click on [OK] to fix the address
15.
Press <Ctrl s> to [Save] your changes – press <Enter> for [Yes] to confirm filtered format
16.
Click on the [Internet Explorer] tab, [Refresh] the screen and test out the new links
17.
Use the [Back] button to return to your own page (to return from Unicorn you may have to
click on the Recent Pages down arrow to the right of the [Back] and [Forward] buttons)
Tip: You can also copy the URL of a web page into the link box. Right click on the Address bar in
Internet Explorer and choose Copy. Move back to the hyperlink box in Word and Paste in the
location using <Ctrl v>.
The HTML code used to create a link is of the form <a href="http_or_file_location"> ... </a>, with the
text used for the link occupying the area denoted by .... There's no need to verify this (unless you
want to).
Experiment setting up other links to your favourite sites, if you like, either by typing in the address,
copying and pasting it, or using automatic fill (as above).
Changing and Removing Hyperlinks
To change or remove a hyperlink you simply select it then alter its Properties. You can do this
through the Properties command in the Format menu or, more simply, via a shortcut menu:
1.
Return to your Home Page - click on the index.htm tab on the Task Bar and then right click on any
of your current hyperlinks
2.
From the shortcut menu which appears choose Edit Hyperlink…
3.
Amend the Address: as required
4.
Here, [Cancel] the change (or use [Undo] if you accidentally changed it)
To delete a hyperlink:
1.
Repeat steps 1 and 2, as above
2.
Choose the Remove Hyperlink option
3.
Here, click on [Undo] or <Ctrl z> to restore the link
Adding Graphics
Inserting pictures into your web pages is also very simple. You can even use pictures as links to other
pages of information. Graphics can come from many sources - they might be from files you have
created yourself (eg from a digital camera, by drawing or scanning in a picture), from commercial
galleries (eg the Microsoft Clip Art Gallery) or from other sites on the WWW. You should
Documents you may be interested
Documents you may be interested
