The Basics of Web Page
Note: For most of these there are movie versions, quicktime movies which show
you how to accomplish each step. To view the movies, you will need Quicktime
(a free download that works on Macs and PCs)
1. To start Movie version
- Create a folder on your desktop or disk. Be sure you put all images and
webpages you create in this folder. It will make your life easier, later.
- Open Netscape
- Under FILE -"new" and "composer page"
- Remember to save your file often, either to your desktop or to a disk.
- You should name your file something simple with no spaces or odd characters
and with the ".html" extension
- NOTE!: If at anytime you stop and save your file, when you reopen it be
sure that you go to File - "edit page" which will put you back into Composer
so you can work on the page.
2. Adding a title : Movie version
- Type a title for your page
- Highlight the title (usually by holding down the mouse and
dragging the cursor over the title)
- Center it (the lines toward the right, lower bar on top of
- Choose a font (in "FORMAT")
- Choose a type size ( in "FORMAT")
3. Choosing colors Movie version
- Under FORMAT select "page colors and backgrounds"
- Click on "Use Custom Colors" - click (or maybe right click) on
the text you want to change colors for
- Choose background color, Normal text color, Link color, visited
- Don't be alarmed if you don't "see" these changes on your
page: Try saving your page and then going to FILE, "browse page"
your email address Movie
- where you want on your page, type in your email address or an
equivalent phrase (i.e. Contact Dr. Dixson)
- Now go to 5., then come back and finish this (otherwise anything
you type after this will be part of the link)
- highlight it
- click on the link icon (chain link) on the top bar of the window
- type in "mailto: YOURADDRESS@holmes.ipfw.edu" (for example:
firstname.lastname@example.org or another email address such as
5. Create two to six
subheadings or category titles (the following are possible examples): Movie version
Remember you can highlight these and use the FORMAT
to change the font, size, style (underlined, bold etc.) and text
for COM 310, Unit One:
- family definition
- family description
- cohesion, adaptability, metaphors, bnoundaries, and themes
- calibration, relevant aspects of the ecosystem, open/closed boundaries
for COM 410:
- Unit 1
- Unit 2
- Unit 3
- Unit 4
- Unit 5
for COM 582:
Now, go back to Step 4 and add in your email link. Always type
text after any potential link, before you actually put in the
link (otherwise, netscape assumes everything you type after the link is
part of the link).
- conclusion from literature
- qualitative method and results
- observational coding method and results
- survey method and results
- experimental method and results
6. Put a
horizontal bar between each category Movie version
- put cursor where you want the bar
- click on INSERT and "horizontal line"
- double click on the bar or click on bar and then go to FORMAT
"horizontal line properties" to change the width, thickness etc.
(always have the bar as a percentage of the window so it adapts to the
screen it is on)
Place an anchor in front of each category title Movie version
- highlight the category title or subheading
- click on "Insert" and then "named anchor"
- click "ok" for title (or you can change the name of the anchor
if you like)
- do this for each category title
Create an internal navigation bar (to navigate within the page) at the
top of the page Movie
- type text for each category or subheading across the top of the
- highlight an individual category in that navigation bar
- click the link on top navigation bar
- if is not already showing, click on arrows to right of bar for
- select the one you want
- click "ok"
9. Add a graphic Movie version
- first find one (unless you already have one saved to disk or
- download it and save it to the disk or desktop folder you
created earlier (to download, click on the image and hold (or right
click for pcs) until a menu comes up. In that menu, save as an
image or picture file)
- back on your page, put your cursor where you want the image
- click on insert image ( or the box at top bar)
- click on "choose file" to find your image (on your disk or
- double click on it
- you can supply alternate text - a name for the image for those
systems who "speak" the page
- if you need to resize your image - the easiest way is to "grab"
the lower right hand corner and move it toward the center of the
picture, that way you keep the proportions of the picture the same.
- REMEMBER: you must upload this image separately when you
upload your webpage
10. Inserting other
links Movie version
- type in the name of a page you want to add a link for, i.e.
IPFW's home page
- highlight the text you want to link
- click on the "link" icon on the bar
- type in the URL address, remember to put in the entire address,
- click "ok:"
11. Upload your page and images into your webspace
- you may use any webspace you choose
- to use your IPFW webspace, follow the directions under "How to Access
My Webspace" on the ITS webpage
(it's a good idea to print this page so you have it as you proceed) -
these directions tell you to do the following:
Either: If you are using a student-access lab Windows
computer you will have an I: drive containing your Web space in the form
of a folder named for your username. Files can be copied, deleted, edited,
etc. as you would in any other folder.
Or A Web-based interface is available
that provides a secure means of editing or copying files into your Web
space. Movie Version
https://my.IPFW.edu You will be asked for your network (i.e., student-access
lab) username and password. This is the one method of updating your
Web directory (FTP is also available).
Accessing your Web folder from myIPFW
• The myIPFW main window displays the Information Technology Services
Web page for students.
• Click the 'My Files' button to access your files.
• When you Click the <My Files> button, you may see a folder
called "All folders", when you click this you should see a
folder name 'Home'.
• This is the same as your Personal drive space.
• Click the word 'Home' to open your personal space.
• Click the Web folder to open it. (If you find you do
NOT have a "web" folder - click on "Create folder", name
the folder "web" and then proceed to open it.)
• You will see any files you have stored in your Web folder.
• For more information see Student Web space How Tos.
• From this page you can upload files you created elsewhere or download
files already in the folder.
• Be sure to Sign Out before shutting down the browser.
- remember to upload each image separately as well as your webpages (don't
upload the folder)
- remember to email your URL (which is http://www.student.ipfw.edu/~yourusername/yourfilename.html)
to me so I can add it to the webpages page
IF YOU HAVE A FACULTY/STAFF ACCOUNT, YOU NEED TO:
click on "my files" (left navigation bar)
click on your name (if you don't have a folder here
with your name - call ITS and tell them you need one)
upload your webpage
(there is an upload button across the top that will allow you to
choose your files - remember
you have to upload your images
Your URL will be: http://users.ipfw.edu/yourusername/yourfilename.html
12. To edit your pages Movie
- Open them on the web (in Netscape)
- Choose FILE - "edit page" (this puts you into composer)
- Create a folder on your desktop: save your webpage and any new images
you want to add into that folder (this way they will be in the same relative
location when you upload them as when you create the webpage)
- Make your changes
- Save to disk or desktop folder
- In your IPFW webspace (your ilogin web folder), delete the old page
- Upload your new page (see 11. above)
- Your "blank" uploaded webpage should be similar to the following example
(example is for COM 310 - substitute appropriate headings).
13. Writing for the web
- Stuart Blythe of the English Department at IPFW has some wonderful tips
on how to write for the web, I recommend you check them out:
for the Web