 |
Prior to this
activity, you should have created and saved three curriculum-specific
webpages. You are now going to build a frontpage for the mini-website
you have created. Here’s how to do it:
- Open
the DiDa HTML Editor.
- You
will be using the blank HTML Document that appears on the screen.
- Type
these lines on the screen. Hit the Enter key two times after
each line to create some blank lines in the document.
Adding
the HTML Tags
- Hold
down the mouse button and drag across the words "Welcome to
(YOUR NAME)’s Website". (words turn blue)
- Click
on the Header button and select H1. (<H1>
tags appear at the front and back of the text line)
- Position
the cursor in the blank space below ending </H1> tag.
- Click
on the Format button and select Horizontal Line to add
a <HR> tag to the webpage.
- Hold
down the mouse button and drag across the remaining lines of text,
stopping before the </BODY> tag at the end of the document.
(text should turn blue)
- Click
on the Header button and select H2 to add the Header
Size 2 tags to the text. (<H2> tags should appear)
- Position
the cursor at the end of each line of text in the body, click on the
Format button and select Line Break to insert a <BR>tag
at the end of each line. (this will force the browser to display each
line separately instead of running them all together in paragraph
form)
- Insert
another <HR> tag following the <BR> tag after the line
Click on the topic below to go to the webpage using the Format/Horizontal
Line option.
- Your
HTML document should now look like this: (Hint: you can add and remove
blank lines using the Backspace and Enter Keys… just be careful
not to delete any of the < >’s)
Now, you will add the links to the Curriculum-Specific Webpages you
created in Activities 4 and 5. Here’s how to do it:
- Hold
down the mouse button and drag across the title you used to identify
your first curriculum-specific webpage. (words turn blue)
- Click
on the Link Button.
- Select
File on Local Drive.
- A dialog
box will appear. Note: You may need to double-click on the a:
drive to see all the folders. Double-click on the root folder
to see all the files in the root folder.
- Select
cswp1.htm and click on OK.
- A
<A HREF="file:///a|/root/cswp1.htm">(YOUR FIRST TOPIC)
Links</A> tag will be added to the webpage.
- (IMPORTANT
NOTE: You will now make a slight modification to the hypertext address
that was just added so that it will work with all web browsers
(Netscape, Internet Explorer, AOL, etc.)
- Position
the cursor in front of the letter c in cswp1.htm .
- Use
the Backspace key to remove everything between the first quotation
mark and the letter c .
- The
tag should now read <A HREF="cswp1.htm"
- Use
steps 1-10 above to create the links from your frontpage to
the two other cswp#.htm webpages you created.
- Note:
This simple modification will force all web browsers to automatically
go back to the same folder where the frontpage is located to find
the cswp#.htm files that you linked to the frontpage. Take my word
for it… this eliminates a lot of problems and will allow your
frontpage to work with whatever web browser you are using.
- Your
completed frontpage should now look like this:
If you would like to add some of the graphic elements we worked with
in Activities 2 and 3, you may do that now. Refer to the instructions
in those activities to refresh your memory.
- When
you are sure that all is correct, click on the File menu.
- Click
on Save.
- Select
the a: drive and the root folder
- In the
File Name: box, replace the *.htm with fpage.htm
- Be sure
that the directory path is a:\root\fpage.htm
- Click
on OK.
- Click
on the Preview Screen tab to view the webpage. It should look
something like this. You can follow the links to your curriculum-specific
webpages by clicking on the appropriate link. Of course, since you
aren’t online, you will not be able to follow any of the online
links on your curriculum-specific webpages. Click on the Home
button to return to your frontpage.
- Save
and Close the fpage.htm file and use File/Exit to close the DiDa HTML
Editor.
Testing
the Frontpage
- Log
on to the Internet and open your web browser.
- Click
on the File Menu.
- Click
on Open File.
- Navigate
to the a: drive and the root folder.
- Click
on the fpage.htm file. (it should turn blue)
- Click
on OK.
- Your
new frontpage should appear on the screen looking something like this:
- Test
the links to your curriculum-specific webpages and the links on those
webpages.
- Note:
If you find that a link doesn’t work, you will want to go back
to DiDa after you log off and re-check the URL’s for the frontpage
links. Is the file name correct? Does it have the .htm suffix?
These are the most common errors or omissions. You can edit the URL
from DiDa if you need to correct any problems. Be sure to save
the corrections when you are finished.
Note: I would like to see the frontpage that you have created
for your website. E-mail the HTML source code for your fpage.htm
file to me <bjost@josts.net>.
Include the words "webpage E" in the subject of the
message. You do not need to include any graphic files that you added
to the webpage, just the HTML source code. Record the date you sent
the file in your logbook.
|
|
