|
Open the index page in the editor.
We will now use more html tags, attributes and style to
enhance the index.htm (Home Page).
| <center> </center> |
Determines the position of the page on
the monitor screen. |
| bgcolor="#99ccccc" |
Determines the background colour of the
web page, table, row, or division. |
We will now introduce some very basic styles which should
give you an idea on their use.
|
<style type="text/css">
|
The notation between the style
tags must comply to the style rules.
For now we will use 3 sets of style rules to determine
the format of the hyperlinks and page header. |
a {
color: blue;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size:10pt;
text-decoration: none; } |
This style determines the colour, font, font weight,
font size, of the hyperlinks. Also determines whether
the hyperlink is underlined or not. In this case the
hyperlink is not underlined.
<a href=mypage.htm>not underlined</a>
|
a:hover { color: red;
font-size: 10pt;
font-weight: bold;
text-decoration: none; } |
This style will change the color of the
hyperlink when the mouse hovers over the hyperlink text. |
|
.heading1 { color: blue;
font-family: verdana,arial,sans-serif;
font-size: 18pt;
font-weight: bold;
|
Notice the difference when using style
rules for headings and text styles. You give the style
a name of your choice preceded by a period. It is also
different because you need to add the rule to the <td>
of the text header by using this code: class="heading1"
Check the source code below. |
| </style> |
This ends the style |
We will now try the image tag. Normally you would have your
images or graphic files already prepared and you would insert
the code between the tag together with the path to your image/graphic.
For now to demonstrate the code right click on the image and
save as C:\My Web1\images
Now insert the following code in the correct location. Check
the source code below.
| <img src="images/header1.gif"
width="140" height="40"> set
the <td> to center and middle. |
<html>
<head>
<title>My Home Page</title>
<style type="text/css">
a {
color: blue;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size:10pt;
text-decoration: none; }
a:hover { color: red;
font-size: 10pt;
font-weight: bold;
text-decoration: none; }
.heading1 { color: blue;
font-family: verdana,arial,sans-serif;
font-size: 18pt;
font-weight: bold;
</style>
</head>
<body bgcolor="#99cccc">
<center>
<table width="760")
<tr valign="middle">
<td width="140" height="40" align="center"
valign="middle"><img src="images/header1.gif"
width="140" height="40"></td>
<td class="heading1" width="620"
height="40" align="center">This is
my new home page</td>
</tr>
</table>
<table width="760")
<tr valign="top">
<td width="140" height="20">
<p><a href="">Home Page</a></p>
<p><a href="pages/page1.htm">Page
1</a></p>
<p><a href="pages/page2.htm">Page
2</a></p>
<p><a href="pages/page3.htm">Page
3</a></p>
</td>
<td width="620" height="20" align="left">
<p>This is the start of the main table of the web
page and you can add as much text as you feel is necessary
to promote your page.</p>
</td>
</tr>
</table>
</center>
</body>
</html>
Copy this code into an editor. Name the page index.htm
and save to the Folder:
C:\My Web1 If this folder contains a page called index.htm
you can overwrite the old page.
It is now time to try and format the other 3 pages using
html and the styles you have learnt here.
Good Luck
Previous Page
|
