***GETTING STARTED***
1. Plan out your web site by drawing a map on a piece of paper: Make a bunch of squares to represent the pages you will create. In each square, note what will be placed on that page. On top of each square, write the name of the page-to-be. Pages can have any name you want (I recommend that they be kept as short as possible) as long as each page name ends in ".html" (example: owl1.html, owl2.html, resume.html).
2. Open MS Word.
3. Select "file" from the choices at the top of the screen, and click on "new" from the drop down menu. A box will open up. Select "web pages" from the tabs. Not all versions of Word have this tab, if not, look in “templates”.
4. Double click on the icon called "blank web page".
5. Select "insert" from the choices at the top of the screen, then select "file" (or what ever else it is you are putting on the page). A dialogue box will open. Now locate the file you want to put on the page, select it and it will be transferred to the page builder.
6. Select "file" at the top of the screen and click on the "save as" option. Select your disk as the place to save to. Enter a name for your file in the “file name” box (second from the bottom). Make sure the "save as type" box (below the name you entered) says "HTML document". Now click the "save" button at the top right. Now your page is saved. SAVE OFTEN WHILE YOU WORK. The next step will be formatting your pages: adjusting the size of your headings and other text, adding in hyperlinks (clickable links that take you to other pages), and any other pictures or other stuff.
***FORMATTING***
7. To change the way text looks, highlight the word or sentence etc. to be changed. To highlight text, click and hold down the left mouse button at the beginning of a word or text, then move the cursor across the text to be highlighted, then let the mouse button go after the text you want is highlighted. Next, click on the button at the top for the desired change: B for bold, I for italics, etc., and to make the text size bigger, click on the large A with the up arrow. To make text smaller, click on the small A with the down arrow. Other changes can be made from the tool bar as well: font type, text style, text color, background color, etc. NOTE: Anything you do here can be changed later.
8. There are two kinds of hyperlinks (a place that when clicked on, transports you to something else) that you can add - a link to a page, and a send email link. For either one, highlight the word or text that will be the actual clickable part (the thing that is clicked on to make the link work). Then select “insert” from the tool bar at the top. A dialogue box will open up. Select “hyperlink” (the last choice). In the box labeled “link to file or URL” you will need to put the full name of the page to link to. Make sure to include http:// at the beginning and name.html at the end (example - http://www.wsu.edu/~YOUR_LOGIN_ID/PAGE_NAME.html - this is how all WSU pages are addressed. Mine is http://www.wsu.edu/~owl/index.html). Or, if you want it to be an email link. Enter - mailto:Emailaddress (example: mailto:owl@wsu.edu) This makes a link that will open an email program with a letter addressed to the email address you enter.
***PUTTING YOUR PAGE ON THE NET***
9. Once you have all the text sized and formatted, and any links or other stuff on your page, SAVE TO DISC!!! Now you are almost ready to post the page to the server (the big computer that holds and controls everything). You will first need to make sure that your own WSU account is open. Open a web browser and look up your starting page - "http://www.wsu.edu/~YOUR_LOGIN_ID". If your page space has been created previously, you will see your page. If your space has never been set up, you will see "Missing File". If you see "Missing File",
follow this link (click here), to initialize your account (create the files that will hold your web page). Or type in manually "http://www.wsu.edu/UNIX_Systems/Chapters/wsu_homepage.html". When you have completed the procedures, start a browser again and check your page. If it's there, you have successfully created the file that will hold your page. You are ready to send your page to the server.
***FTP YOUR PAGE TO THE SERVER***
10. Now you will send your page to the server. Start the FTP (file Transfer Protocol) program. In the first pop up window (session Profile or properties), enter “WSU Unix” in the “profile name” box, “wsunix.wsu.edu” in the “host name” box, “automatic detect” in the “host type” box, and your user ID and Password in the next two boxes. Then click the OK button.
11. The FTP program window has two halves. The left is your stuff (local system), and the right is WSU’s stuff (remote system). We will move your page from your disk to the WSU server. We must first make sure that the correct directory on the remote system side is selected. At this point, the remote system will say “/users/www/YOUR_LOGIN_ID”. Double click on the file in the list below that says “public_html” and it will be added to your directory name (what's in the box at the top right). Now the remote system box will say: /users/www/YOUR_LOGIN_ID/public_html (you may not be able to read the full name, but it should be there). The only file in the list now should be “index.html” (the default page created when you initialized your account in step 9). All files you add now will appear in this list.
12. Select the drive your disk is in (on the left side, at the top), and locate the file to transfer. Click on the file name to highlight it. Now find the 2 arrows in the space between the two directories. One points left and one points right. Click on the one pointing right and your file will be moved over from the left to the right window. Now the list on the remote system (right side) will have index.html and the file you just moved into it. The page is now on the WSU server and you can look it up.
13. Your page address will be "http://www.wsu.edu/~YOUR_LOGIN_ID/PAGENAME.html". Now, start a web browser and check your page to make sure it worked. To make changes, go back into Word and edit your saved page and then re-FTP it to the server. It will replace the previous version with the updated one. When you view the page the next time, hit the reload button on your web browser to see the changes (if you do not hit reload, you will see the older version of your page).
14. Now repeat the steps for each of your pages. Remember to SAVE your work every time you make any progress or add anything important or do any thing that you can’t afford to lose. When you have all the pages working on the server, check all your links to make sure they all work.
15. Your system folder will now have the default “index.html” and all the other .html files you have made and transferred. The index.html is the start page people will get if they look up your URL (page address) without a file name. You can add a link to the pages you have just created from your index.html, but you don’t have to. If you don’t, your new pages can only be viewed by adding the pagename.html extension. EXAMPLE: if you type in “http://www.wsu.edu/~owl” you will see my start page index.html (your browser will look for index.html if no name.html is given), or you can type in “ http://www.wsu.edu/~owl/index.html “ and you will still see my index.html page. To see another page of mine (web help) you would type in “http://www.wsu.edu/~owl/webhelp.html“
Note: I love to do this sort of stuff and I hope my tutorial will be easy and
fun for all. Take your time and don't worry. I suggest you start small and
then go back and add more later. Please feel free to contact me with any
questions, I am always willing to help out.
Note: Keep it simple to start with. Once you get a page on
the net, then you can look at it and come up with more stuff to add to it.
I hope this was helpful and fun. The best pages start small and simple, then grow and expand.