Experiment 2

Experiment 2
— print (last updated: Jun 28, 2009) — print

Create a folder (directory) called HomePage on the desktop.
Open HTML-Kit, create a new file. Add this content to the body (substitute appropriately for Robert Kline):
```
HOME
  
Hobbies
  
Tunes

My Home Page


My name is Robert Kline.
I am currently taking the Csw131 class and this is 
where I am starting.
```
Save the file with the name index.html in the HomePage folder.

Then, using HTML-Kit, add tags to the index.html document so that it looks like this:


<b>HOME</b>
&nbsp;&nbsp;
<a href="hobbies.html">Hobbies</a>
&nbsp;&nbsp;
<a href="tunes.html">Tunes</a>

<h2 style="text-align:center">My Home Page</h2>

<p>
My name is <b style="color:red">Robert Kline</b>.
I am currently taking the Csw131 class and this is 
where I am starting.
</p>

When you create the style attribute:

place the cursor just before the ">" in the start tag
type a space bringing up the attribute menu
select the appropriate attribute from the menu

Create two new HTML documents in the HomePage folder called hobbies.html and tunes.html.

In the file hobbies.html set an appropriate title and add this content to the body (if so desired, substitute appropriately for "Hobby #1" and "Hobby #2"):


HOME
  
Hobbies
  
Tunes

My Hobbies
Hobbie #1
Hobbie #2

Use HTML-kit tags to make it this:

<a href="index.html">HOME</a>
&nbsp;&nbsp;
<b>Hobbies</b>
&nbsp;&nbsp;
<a href="tunes.html">Tunes</a>

<h3 style="text-align:center">My Hobbies</h3>
<h4>Hobbie #1</h4>
<h4>Hobbie #2</h4>

In the file tunes.html set an appropriate title and add this content to the body (if so desired, substitute appropriately for "Favorite #1" and "Favorite #2"):


HOME
  
Hobbies
  
Tunes

My Top 10 Favorite Tunes

Favorite #1
Favorite #2

Add tags using HTML-kit to make it this:

<a href="index.html">HOME</a>
&nbsp;&nbsp;
<a href="hobbies.html">Hobbies</a>
&nbsp;&nbsp;
<b>Tunes</b>

<h3 style="text-align:center">My Top 10 Favorite Tunes</h3>
<ol>
<li>Favorite #1</li>
<li>Favorite #2</li>
</ol>

Test the linking between all three pages.

The next two steps add a bookmark and links to it from two pages.

In hobbies.html, add the content below

<hr />
<p>
This is a 
<a href="#another_section">hyperlink to another section</a> 
in this page.
</p>

<!-- 
The <br /> elements added are needed to make the page long enough 
so that one can see the effect of jumping to a bookmark.
-->

<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />

<h3><a name="another_section"></a>Another section</h3>

Here is more stuff, further down the Hobbies page.

<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />

Although it is more expedient to cut-and-paste, the addition of this content is best done in 3 steps:

Add the first section up to the

<h3><a name="another_section"></a>Another section</h3>

by cut-and-paste.

Add the element by hand:
```
<h3><a name="another_section"></a>Another section</h3>
```
The <a name=""></a> should be created using the green anchor icon in the Objects tab. The bookmark never surrounds text, it is always used with empty content.
Add the third section, starting with "Here is more stuff..." by cut-and-paste.

In tunes.html, add the following hyperlink to the bookmarked section in hobbies.html:

<p>
This is hyperlink to 
<a href="hobbies.html#another_section">the bookmark in Hobbies</a>.
</p>

Test out the new links in HTML-Kit Preview. The overall effect should look something like this:
first_home_page
Test out the effect in a web browser. Open a web browser of choice to the file index.html.
- To use IE on most Windows systems you simply have to double-click on the file because IE is the default system browser.
- To use Firefox, use File Open and navigate to the file.

Experiment 2 — print (last updated: Jun 28, 2009) — print

Experiment 2
— print (last updated: Jun 28, 2009) — print