Session 1 – Creating a Simple web page
I. How does the World Wide Web Work?
Web servers
URLs - Domain names
II. Publishing web pages
a. Free Web page hosts
Service
Web
Ads
Templates Editor Wizards
Image
Space
Lbrary
Comments
Hometown.aol.com
10MB
yes
yes
yes
no
yes
Free for AOL members
Homestead.com
12MB
no
yes
yes
yes
yes
Rated best by PC magazine
GeoCities.com
11MB
yes
yes
yes
yes
yes
Largest – 4 million users, 35 million pages
ZDNet.com/sitebuilder 15MB
yes
yes
yes
yes
yes
theglobe.com *
12MB
yes*
yes
yes
no
limited
Tripod.com*
11MB
yes*
yes
limited
yes
no
can use MS Frontpage to create pages
Xoom.com
11MB
no
yes
yes
yes
no
limited to simple page designs
Home.Netscape.com
5MB
yes
yes
yes
yes
yes
*Pay extra to not have ads and get premium features
b. Your ISP as a web host
III. Using the GeoCities web page host
1. Sign up to use Yahoo.
1 Go to login.yahoo.com and click the Sign up now link.
2. Enter an ID and a password.
3. Answer the questions and click the Submit This Form button.
4. Complete the registration process.
2. Quick overview of the Yahoo GeoCities.com web page
Getting Started
Resources
Get Connected
Advanced Toolbox
Website Addons
IV. Creating your first web page
1. Click the Yahoo! PageWizards link.
2. Click the Personal Page icon ( located near the bottom section of the Quick Start page). .
3. Click the color you want to use.
4. Click the Begin button.
5. Click Preview button to see what basic page will look like. Click X button (upper right
corner) to close the preview.
6. You can now change the color. If OK click the Next> button.
7. Enter your name and email address (use your Yahoo or regular email address) . Click
Next> button.
8. Check the Use our default picture radial button. Click Next> button.
9. Complete step 3.
10. Complete step 4 E.G. Link Name “Ewing SeniorNet” web address www.ewingsnet.com
11. Complete steps 5 and 6.
12. Enter the Page Name “ index ”
13. Important: Write down your URL (your web page address) .
14. Click the Done button.
15. Close the Internet Explorer browser.
V. Testing your first web page
1. Open the Internet Explorer browser program.
2. Enter your web page URL In the address bar and press the enter key.
3. To make changes go to www.geocities.com.
Preparing for For Session 2
At home:
1. Design your personal web page on paper.
2. Make a list of the elements
site name
headings
data
graphics
links, etc.
3. Using a word processor (e.g. Word) enter your text
4. Scan in your photos (set resolution to 72dpi).
5. Format a floppy disk and copy your files to the disk.
6. Bring the disk with you to class.
.
Session 2 - Using GeoCities advanced features
I. Using Yahoo! Pagebuilder
Go to www.geocities.com
Select Yahoo! Pagebuilder
Click Launch Pagebuilder
Review the icons in the Pagebuilder toolbar
Using Yahoo PageBuilder
Step 1: Start A New Page
Go to http://us.geocities.yahoo.com/v/pb.html, click Launch PageBuilder.
1. To start a new page, click the New button on the toolbar.
Step 2: Selecting a Background
1. Click the Add-ons button on the toolbar. A dialog box labeled the "Add stuff to your page!" will appear.
2. Select Basics from the "Category" frame and click the Background icon in the "Add-ons" frame. The
"Background Properties" dialog box appears.
3. Select Template_Pages from the "Collection" drop-down list and select personalb.gif from the "Picture List" box.
You can also set a solid background color by clicking on the Set Background Color button.
4. Click the OK button. The selected background now appears on the page.
Step 3: Adding a Page Title Image
Your page title describes what your web page is about. The title can be plain text or an image of stylized text. In this step
you will be selecting a title image from PageBuilder's image library.
1. Click the Pictures button on the toolbar. The "Select Picture" dialog box appears.
2. Select Template_Titles from the "Collection" drop-down list and select the ptitleb.gif image from the "Picture
List" box.
3. Click the OK button. The selected image appears on the page.
4. Click and drag the image on the blue background in the top left corner of the page.
Save your work
1. Save your work often Click the Save button. The "Save and Publish Page" window appears.
2. Type index in the "Page Name" box. If you already have a page named index, save your page using another
name like mypage . Click the Save button.
3. When the "Yahoo! PageBuilder" save confirmation window appears, click the No button for now. You can view
your page at the very end of this tutorial
Step 4: Adding Text
1. Click the Text button on the toolbar. A text box will appear in the center of the page.
2. Type your name and then highlight the text by clicking and dragging with the cursor. Select Arial and 14-point
font from the drop-down list and click on the B button to make the text appear in bold.
3. Click and drag the text box until its under the image in the top left corner of the page
Step 5: Adding a Picture
In this step you will be selecting a picture from your personal library, or the PageBuilder's image library if you
don't have one of your own. Click the Pictures button on the toolbar. The "Select Picture" dialog box appears.
.
1. Click the Browse button. The "Choose File" window appears.
2. Go to the directory or folder on your computer where your picture is saved, select the picture you want to add to
your page, and click the Open button. The location of the selected file appears in the "Upload Image" window.
Click the Upload button in the "Upload Image" window.
3. The selected picture now appears in the center of the page. Click and drag the picture until its under the text box
that has your name in it.
If you don't have your own picture on your computer, you can add a picture from PageBuilder's image library
1. Click the Picture button on the toolbar. The "Select Picture" dialog box appears.
2. Select Templates from the "Collection" drop-down list and select the stickfig.gif image from the "Picture List"
box.
3. Click the OK button. The selected image appears in the center of the page.
4. Click and drag the picture until its under the text box that has your name in it.
Step 6: Adding an Email Link
1. Click the Text button on the toolbar. A text box will appear in the center of the page.
2. Type Email Me! in the text box.
3. Highlight the text and make it Arial , 14-point font, and bold .
4. Keep the text highlighted and click the Link button on the text toolbar.
5. When the "Hot Link" dialog box appears, select E-Mail from the "Link to a Location" drop-down list.
6. Your Yahoo! email address should appear in the text box. If it does not, or if you want to use a different email
account, type in that email address. Click the OK button.
7. Click the text box and drag it under the picture on the left side of the page.
Save your work!
Remember to save your work occasionally when you are working in PageBuilder. To do so, click the Save button
on the toolbar.
At this point your page should look like this:
Step 7: Adding a Paragraph of Text
1. Click the Text button on the toolbar. A text box will appear in the center of the page.
Note: At times when you add new elements to your page you may see red crossed lines over the overlapping
element. If this is the case, move the text box so that it does not overlap. Or if you want it to overlap, go to Format
menu, select Page Properties , and then check Layered HTML .
2. Type a paragraph about yourself into the text box.
3. Highlight the text and select Helvetica and 10-point font from the drop-down list in the text toolbar.
4. Position your cursor on the blue bottom-right handle, click and hold, and then move the cursor to resize the
window to remove any blank space.
5. Click and drag the text box over to the right-hand side of your picture.
Step 8: Adding Links to Other Web Sites
1. Click the Text button on the toolbar. A text box will appear in the center of the page.
2. Type "My Favorite Links". Press Enter and type "Yahoo!". Press Enter again and type "Yahoo! GeoCities".
3. Highlight "My Favorite Links" text, then select Helvetica , 11-point font, and bold from the font toolbar.
4. Highlight the "Yahoo!" text and click the Link button on the text toolbar.
5. When the "Hot Link" dialog box appears, select Web URL from the "Link to a Location" drop-down list and type
"www.yahoo.com" in the text box and click the OK button. You now have a link to the Yahoo! home page.
6. Highlight "Yahoo! GeoCities" and repeat steps 4 and 5 to make the text a link to the Yahoo! GeoCities web site
using this address: "geocities.yahoo.com".
7. Resize the text box so that there is no blank space around the text.
Step 9: Adding a Counter
Yahoo! PageBuilder has many Add-ons that add dynamic, fun, and professional-looking objects to your page. For
example, the web page counter dynamically counts how many times your page has been viewed. In this step you will be
adding a counter to your page.
1. Click the Add-ons button on the toolbar. When the "Add-ons" pallet opens, select Basics from the "Category"
frame and click the Counter icon in the "Add-ons" frame.
2. When the "Counter Properties" window appears, select a style from the "Style" frame, and the color and size
properties from the "Color" frame. You can see your changes in the "Preview" frame. When you are done, click
the OK button.
3. The counter appears in the center of the page. Click and drag the counter to the bottom your page.
Step 10: Saving and Viewing Your Page
The final step to building a web page is saving it and then viewing it in a web browser. In this step you will save and view
your newly created page.
1. Click the Save button to save your page. The "Save and Publish Page" window appears.
2. Make sure the name of your page appears in the "Page Name" box. Your first page should be named “index.”
3. Click the OK button. The "Yahoo! PageBuilder" window appears.
4. Write down the URL for your new web page. You may want to share it with your friends and family.
5. Click the OK button. A new instance of the web browser is launched and you can view your newly created web
page.
Congratulations! You just created your very own web
page. If you followed all of the steps, your page should
look similar to the one on the right.
Sessions 3 & 4 – Adding More Web Pages to Your Website
I. Creating your second web page
Click the Add-ons button to open the Add Cool Stuff window
In the left Categories pane highlight Basics
In the right Add-ons pane select the Background icon. The Background Properties window
will open.
In the Collection drop-down list Select Template pages .
In the Picture List select SkyBluemg2.gif click the OK button.
Click the Pictures on the toolbar.
In the Collection drop-down list select Photos_Art.
Select a picture from the Picture List. Click OK.
Click on the picture on the web page. Select the square in the lower right corner and adjust
the size of the picture.
Click File and Save As . Give the page the name Page2 . Click the Save button.
Click the Text button on the toolbar. A text box will appear in the center of the page
Enter your text in the text box. Highlight the text and select a font style and size.
Position the mouse pointer on the edge of the box so that it changes to a double arrow. Now drag the box to a
new position on the page.
If you wish you can add a second picture and another text box.
Click Add-ons button to open the window. Select Basics and click the Counter icon.
When the Counter Properties window opens select a style and color and then click OK.
Click the Picture button and insert a button.
Select the button icon and click the Link button on the toolbar.
Insert the URL you wish to link to (e.g. your index page)
Save your page
II. Linking pages
Using the PageBuilder, select your index page
Add a link to your second page.
Save your page
III Test your two page
Check that the links between the two pages work as you want them
Test your web pages
Test if the Google search engine finds your website
IV Advanced Web page design (HTML programming)
Go to the GeoCities home page
In the Advanced Toolbox section select File Manager
Open the File Manager
Select your index page and click the edit button
Edit the title for the page as you want it to appear
In the <head> section add the following two lines
<META NAME ="keywords" CONTENT="cars, automobiles, transportation">
<META NAME="description" CONTENT="This page is about cars, race cars, and the
sport of auto racing.">
Click the save button
Help
Tutorials on using GeoCities
Using GeoCites advanced features http://www.geocities.com/SiliconValley/Pines/8297/
Creating a genealogic web page on GeoCities http://help.surnameweb.org/tutorial/geocities.html
Using PageBuilder http://us.geocities.yahoo.com/v/p/t/a.html
Cool Tips
Create a slide show - http://website.lineone.net/~alan.duncan/howto/meta3.htm
Create Thumbnails - http://website.lineone.net/~alan.duncan/howto/thumb.htm
Microsoft Download website - http://msdn.microsoft.com/downloads/
Download shareware & freeware - http://www.tucows.com/
Free Clip Art and photos
Free clip art collection - http://www.clipartconnection.com/
Links to other free clip art websites - http://www.aplusart.com/
Advanced graphics techniques (java applets) - http://www.bellsnwhistles.com/
An image search engine - http://www.ditto.com/