Creating a Web Page

Learning Guide: Creating a Web Page

Creating & Publishing Web Pages Instructor: Teresa D. Burgin The procedures for creating, updating, and publishing web pages 646-2696 for yourself or for any other web page in your organization's [email protected] server directory are essentially the same. You will need to have the following information to upload files to the web server that will host your pages. Username – Web server access username. Password – Web server access password. It is critical that you not share this with anyone because ultimately, you are responsible for what happens with your account. FTP directory – This is specific to each person or organization and is used for uploading files to the web server.

Basics of Creating a Web Page 1. Design rough draft of the proposed web page on paper. 2. Create page using an HTML editor such as:

3. Upload page to the web server using FTP software.

4. Check page in web browsers (e.g., IE, Netscape, Firefox, Mozilla). 5. Edit where necessary and upload changes.

Always edit a copy of a file. Whether you plan to begin with a template file or a file from an existing web page, save a copy of the file to your local or network drive before accessing a web page editor. It’s always best to have a backup!

CAHE Technology Help Desk • 646-3305 • [email protected] • cahe.nmsu.edu/help

Creating a Web• Page 2

Creating an Account Using Free Web Space (Yahoo! Geocities.com)

1. You must find a service that will provide web space for you. A list of “free” service providers is located at the end of this document. 2. For the purpose of this class, we will use the Yahoo! service, Geocities which can be located at http://www.geocities.com. 3. Find the link to subscribe to free web space.

4. View the Yahoo benefits page and then click on the SignUp link.

CAHE Technology Help Desk • 646-3305 • [email protected] • cahe.nmsu.edu/help

Creating a Web Page 3

5. Fill in all relevant information and click on the Acceptance of Terms, I Agree, button at the bottom of the page.

Funded in part by the U.S. Department of Agriculture under Agreement Number 0200310. New Mexico State University is an equal opportunity/affirmative action employer and educator. NMSU and the U.S. Department of Agriculture cooperating.

Creating a Web• Page 4

6. Print the registration confirmation page and keep it in a safe place for future reference.

7. 8. Click on the Continue to Yahoo! GeoCities button at the bottom of the Yahoo! Registration Confirmation page. 9. Fill out the brief survey and click the Submit button.

CAHE Technology Help Desk • 646-3305 • [email protected] • cahe.nmsu.edu/help

Creating a Web Page 5

10. View the confirmation of Yahoo! ID and homepage information and then click on the Build your web site now! link. NOTE: In our example, http://www.geocities.com/nmsuaxed is the homepage for the username nmsuaxed. This information is important when uploading pages via FTP to the web server. Again, a good idea to save the information in a safe place for future reference.

11. View the GeoCities Control Panel page to become familiar with its content and then click on the Create a Web Site link.

Creating a Web• Page 6

12. Use PageBuilder to create a personalized multipage web site or PageWizards for a simple home page. In this Learning Guide example we will use Yahoo! PageBuilder; click on the link, Try PageBuilder.

NOTE: Many web hosting services offer templates that subscribers can use at their discretion. This is an easy way to build a first web page. Most templates can be altered to meet the needs of users as they acquire more advanced skills in web page construction.

It's a good idea to preview the template page in several web browsers, if possible, to be certain that the formatting is correct. Sometimes there are inconsistencies between how the web page editor and different browsers display a page. 13. Choose a template or create your own page using the embedded HTML editor within Yahoo! GeoCities. 14. Once your creation is complete, click on the Save button and your file will be automatically uploaded to the Yahoo! Geocities server. 15. View your creation and edit as needed. Standard web address format for a Yahoo! Geocities page: http://www.geocities.com/username

CAHE Technology Help Desk • 646-3305 • [email protected] • cahe.nmsu.edu/help

Creating a Web Page 7

Modifying an Existing Page on the Server The procedure for modifying or updating a page already on a web server is essentially the same as using a template to create a new page. Instead of modifying a template, you begin by using a browser or FTP client to find the page to be modified on the server. You then save a copy of the file to your local hard drive, disk or network drive. Be sure that your web page editor opens the local, disk, or network copy of the file for editing and not the one on the server. Once you've created a file, you can simply edit a local copy of that file in subsequent versions.

When you edit a file, keep the same name as the current page (e.g. index.html, mypage.html, resume.html) so that links from other pages do not become invalid.

Types of URLS A Uniform Resource Locator (URL) is the address of a web page. A URL can be absolute or relative. An absolute URL describes the full path to the destination file. Example of an absolute URL in html code: Home A relative URL has some missing element in the address. The missing information is supplied by the page that contains the URL (i.e. if the protocol http:// and domain name web.nmsu.edu are missing in the address, the browser replaces it with the protocol and domain of the page containing the URL). Example of a relative URL in html code: Home Relative URLs can be very useful if you want to move pages around from one place to another. If you design your pages using just relative URLs (except, of course, for links to other people's pages on the Internet), you will be able to load all the files onto a web server and all the links should work correctly. You could not do this if you used absolute URLs because as soon as you clicked on a link, it would try to load the page from the original server on which the page was created, not the new location on the server.

Creating a Web• Page 8

Uploading Pages to a Web Server Using FTP client software For the sake of ease and convenience, we will use the WS_FTP client software. It is located on most lab computers and the icon looks similar to this.

Double click the icon to open the program and it should bring you to a log in screen similar to the one below. Information is required in just three areas of the log in screen:

1. Host Name/Address: This will be web.nmsu.edu.

2. User ID: This is your assigned NMSU username assigned through ICT.

3. Password: This is also assigned through ICT.

Fill in the fields with relevant information and then click OK.

You should now have a full site screen similar to the one on the next page. This is where you will perform publishing magic!

CAHE Technology Help Desk • 646-3305 • [email protected] • cahe.nmsu.edu/help

Creating a Web Page 9

1. 2. 3.

1. Local system - This side displays areas to which you have permission to access your personal files, be it on your A, C, disk, or network drive. 2. Remote System - This side displays the areas to which you have permission to access server files. 3. This field contains the path to files in your directory on the web server. To keep things in perspective, you can think of the “real name” for the /home/canto5/ portion of the path as web.nmsu.edu. 4. This area displays the directory folders, sub-folders, and files currently available in the “public_html” directory on the web server.

Creating a Web• Page 10

Renaming a File

1. Highlight the file you wish to rename. 2. Click on the rename button and type in a new name. This is a good way to rename your old files before transferring new files over. Example: You are done editing a file named, index.html in your C drive web pages directory and want to upload it to the web. In the remote system side, you can highlight the current index.html file, click on the Rename button and rename it indexOLD.html, or index914.html, or index***.html for that matter. Once the renaming is complete, upload or transfer the new index.html file on your C drive over to the server.

CAHE Technology Help Desk • 646-3305 • [email protected] • cahe.nmsu.edu/help

Creating a Web Page 11

Transferring (uploading) a File

Highlight the file you wish to transfer. You will use the arrows in the middle of the screen to move your file from the desktop to the server and vice-versa. Once your file is transferred to the server side, you are able to view the page on the web.

When you transfer a file with the same name on both sides, the file being transferred will OVERWRITE the old file. This is the reason to always keep a backup copy of your old file just in case you are not happy with the output of the new file.

Using Help If ever you have questions or want to experiment with more advanced techniques, most software programs come with a searchable Help index. WS_FTP offers this feature when you click on the Help button located in the center of the bottom toolbar.

Have Fun and Enjoy Your Creations!

Creating a Web• Page 12

Resources

Free Web Space Freewebs.com http://members.freewebs.com/ 20m.com http://www.20m.com Tripod http://www.tripod.lycos.com/ Yahoo! Geocities http://www.geocities.com

Web Page Development Resources Lehigh University http://www.lehigh.edu/~inwww/work/references.html WebReference http://www.webreference.com/html/ PageTutor http://www.pagetutor.com/pagetutor/makapage/ DaveSite http://www.davesite.com/webstation/html/ W3C HTML http://www.w3.org/MarkUp/Guide/

HTML / Web Page Editors Microsoft FrontPage http://www.microsoft.com/frontpage Macromedia DreamWeaver http://www.macromedia.com/software/dreamweaver HTML Assistant Pro http://www.exit0.com/main/products/products.htm First Page 2006 http://www.evrsoft.com/1stpage3.shtml CoffeeCup HTML Editor 9.0 http://www.coffeecup.com/html-editor The Free Country (various) http://www.thefreecountry.com/webmaster/htmleditors.shtml Mozilla Suite http://www.mozilla.org/products/mozilla1.x/ Netscape Composer http://browser.netscape.com/ns8/

FTP Software WS_FTP http://www.ipswitch.com/products/WS_FTP/index.html CuteFTP http://www.cuteftp.com/products/ftp_clients.asp SmartFTP http://www.smartftp.com/ WinPlanet - FTP Clients by Rating http://cws.internet.com/ftp.html

CAHE Technology Help Desk • 646-3305 • [email protected] • cahe.nmsu.edu/help