Lesson Four
So far so good. But a website consists of multiple pages kept together on the same server or root folder, that are hyperlinked together. Before we can learn how to link pages, we have to create a second page, which we will call Page Two, and keep in the same folder as Page One (Index).
EXERCISE FOUR A
Lets create a second page, and link it to index.htm. Open Notepad, and type the following fresh page of code: <html>
<head>
<title>My 2nd HTML Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>Page Two</h1>
<h2>Hyperlinks</h2>
<p>Welcome to Page Two.</p>
</body>
</html>
Save the new file as two.htm in the same folder as index.htm. You can check it with your browser once it has been saved. Next, lets start with linking.
The code for a hyperlink from one page to another is: <a href="file.name">Text</a>.
EXERCISE FOUR B
Lets first add a link onto Page One (index.htm): <html>
<head>
<title>My First HTML Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>My First HTML Page</h1>
<p>Simple isn't it - a home made webpage in minutes. Paragraphs include automatic line breaks and spaces - but you can also add them using the break tag like this<br /> or like<br />this</p>
<p><em>This line will show as emphasised, I have learnt a new tag.</em></p>
<p><strong>This line will show as strong, I have learnt another new tag.</strong></p>
<h2>Unordered List of Fruit</h2>
<ul>
<li>Banana</li>
<li>Apple</li>
<li>Mango</li>
</ul>
<h2>Ordered List of Fruit</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
<p><a href="two.htm">PAGE TWO</a></p>
</body>
</html>
EXERCISE FOUR C.
Finally, a return link from Page Two. Open two.htm in Notepad, and add the return hyperlink: <html>
<head>
<title>My 2nd HTML Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>Page Two</h1>
<h2>Hyperlinks</h2>
<p>Welcome to Page Two.</p>
<p><a href="index.htm">HOME</a></p>
</body>
</html>
You should now have a rudimentary website consisting of two linked pages, stored on your hard drive.
|