15 From the book, The Non-Designer s Web Book, How to Upload Your Site by Robin Williams and john Tollett On the shelves in late September 1997 Robin Williams and John Tollett & Update Your web site is finished!! Hooray!! So now what?? If you leave your site on your home or office computer, no one but you will ever see it Your site must be posted on a server, a computer that s connected to the Internet 24 hours a day To post your site on a server, you must get the files to them When you send something from your computer to another computer, that is called uploading files You ll hear the term ftp often, and in many ways It stands for file transfer protocol, which is one way of transferring files from one place to another You are going to ftp your files to a server In this chapter first we ll we ll discuss exactly what should be in the web site folder you need to upload Then we ll show you how to upload your folder to the server Once your site is on the server, you need to test it again and fix any problems Then we ll show you how to update your own pages from your home or office, in just a matter of seconds It might seem confusing at first, but after you do it once or twice you ll realize it s actually pretty easy Before you upload Before you can even think about uploading your files to a server, you must first establish a relationship with a provider (relationship = pay them money) We are assuming you did this long ago, because you were supposed to ask them how they wanted the files named (htm or html, index or default for the first page) Just in case you haven t, you must now call your Internet Service Provider (or any other hosting service) and arrange for them to host your site Be sure to ask them if you can have ftp privileges to upload and update your own site If they say, No, that you must e-mail your site as an attachment and they will post it themselves, then you can skip this chapter You don t have to post your site to a service provider in your city you can post it anywhere in the world So if your provider doesn t give you a good deal, ask around and see what other people in your area are doing, whom they are using as a host But before you try to post your site, find a host!
262 T H E N O N - D E S I G N E R S D E S I G N B O O K Gather your files In the previous chapter you did a lot of testing and fixing We hope you were able to fix all or at least most of your problems, and that the only things you couldn t change were those things you have to live with, like text fonts and line breaks, etc Now you need to gather up all your files to send to the service provider or wherever you have decided to post your site All of your files might already be organized because you should have been doing that as you went along, and in the last chapter you should have discovered any missing links or graphics in the wrong place So at this point there are three critical points to remember: 1 Send every file your site needs Your folder should contain every HTML file, GIF, and/or JPG used in your site If you got really fancy and made movie clips or sound files, of course they should be in your folder as well 2 Don t send any files your site doesn t need Your folder should not have any TIFFs, PICTs, BMPs, EPSs, PNTs, PCXs, WMFs, or any other graphic files in it Nor should there be any text files, such as word processing or SimpleText files, or even text clippings 3 Make sure all your files are named properly Remember the conventions you learned in Chapter 4? Make sure you followed them: Every file name should have an extension: html or htm for web pages, gif for GIF graphics, and jpg for JPEG graphics All lowercase letters (this is not critical just good form) Only letters and numbers no odd characters like apostrophes, colons, slashes, etc Never use a space in a file name The only characters you can have in a file name besides letters and numbers are periods, the underscore ( _ ), created by typing Shift Hyphen, or the tilde (~), created by typing Shift ~, usually found in the upper left corner of the keyboard If you created folders within your primary web site folder, check each one of those as well Very important! If you changed any of the file names or moved any files from one folder to another, you will have to go back to the web pages and replace the graphics whose names or placements have changed, and relink any files whose names or placements have changed! Do that first and test it on your computer before you upload
1 5 : H O W T O U P L O A D A N D U P D A T E Y O U R S I T E 263 This is the folder (above and to the right) that contains the entire web site Every web page and every graphic (and even some sound files, wav and aiff) are in this folder This is the folder that was uploaded to the server On the Macintosh server this web site was sent to, the first page must be titled defaulthtml, as shown When a visitor enters the URL wwwratzcom, the browser looks in this folder, finds the defaulthtml file, and displays it The URL of all other web pages in this site would be wwwratzcom/whateverhtml Notice the other folders at the bottom of the window In this example, each of those folders contains another web site Each of those web site folders contains a file called defaulthtml The URL for Jimmy s web site, then, would be wwwratzcom/jimmy/ The browser knows to look inside that jimmy folder, find defaulthtml, and display it This web site, a display of Robin s Cheezy Shotglass Collection, is going to a Unix server that wants the first page to be named indexhtm Notice there are no superfluous files in this folder everything is either a web page or a GIF
264 T H E N O N - D E S I G N E R S D E S I G N B O O K Uploading files After you prepare your web site folder, you need to do two more things in preparation for uploading 1 Get the free software for uploading files This type of software is called an ftp client For a Macintosh, get Fetch For Windows 95, get WS_FTP95 There is other software you could use for this, and if your service provider recommends or gives you something else or you have something else that works great, then use that This is just a recommendation of the clients most people use If your provider doesn t give you the software, go to wwwsharewarecom and search It s easy to find and it s easy to download If the thought of searching for and downloading the program makes you nervous, have a friend do it for you 2 Ask your provider or host for your ftp information Write down the data they tell you, which should be info like this: Your host name, which will be something like ftpdomaincom Or it might be a string of numbers, like 198592792 Your host type, which describes the kind of server you will be posting to (not always required), such as Ipswitch or MAC Peter Server Your user ID, which will probably be your name or something equivalent, such as robin Your password, which you help decide It will appear as bullets or asterisks when you enter it: ****** The directory path where your site will be stored It will look something like this: /WebSTAR 20/studiox/robin/ Once you have that set up, this is the basic procedure you will go through: 1 Do whatever you usually do to connect 2 Double-click the Fetch or WS_FTP95 icon It will open a dialog box as shown on the opposite page 3 Type in the data the service provider gave you Click OK If you get a message asking about data format, always choose raw data 4 The ftp client takes you to the actual server you are now looking inside that other computer! Notice the folder name your provider gave you is open and available, waiting for you to put files into it If you position your windows so you have the ftp client on one side of your screen and your web site folder open on the other, you can just drag files from your web site folder into the ftp window, drop them, and they land on the other computer (the server) Your pages are instantly on the World Wide Web!
1 5 : H O W T O U P L O A D A N D U P D A T E Y O U R S I T E 265 Fetch is a popular ftp client for Macintosh users This path name leads straight to the open folder on the server You can simply drag all the files for your web site from the site folder on your Desktop into the open server window You can also use the Put File button, or the menus (Do not drop the folder ratz into this window! Drag and drop the individual files!) WSFTP is a popular ftp client for Windows 95 users You can drag files from the web site folder on your computer directly into the server window Or on the left side of this window, open the web site folder on your hard disk Select a file or files, then click the right arrow to send them to the server
266 T H E N O N - D E S I G N E R S D E S I G N B O O K Test your site online As soon as you upload your files to the server, they are on the World Wide Web and anyone in the world can view them if they know the address Don t just post them and leave, though! Open the home page in your browser, online, and test the entire site Go through every page and click every link Make sure every graphic is there Make sure all e-mail forms work Make sure animated graphics are moving (and stopping), and that any sound files you created are loading and playing If you followed the directions in the previous chapter, you probably don t have much left to fix, if anything Once again, position your pages side by side the page you created in your web authoring software next to the same page on the web in your browser Leave your ftp client open and ready If you need to make a page change, follow these steps: 1 Make note of what went wrong in the browser 2 Open the page in your web authoring software 3 Make the changes, and save the page 4 You must now upload that page again! Follow the same procedure as when you uploaded your whole site drag the file or files that have changed into your folder on the server If you made a change in a graphic, upload the graphic, of course If you made a change that affected three pages and two graphics, upload all five files When you drag those files with the same names into the same folder on the server, the newer files will simply replace the older ones, as long as the new files have exactly the same names as the old ones 5 Click on your browser window to make it active To see the new changes, you have to reload the page But some browsers store the old page in their memory cache, so if you reload and don t see the changes, you must force the browser to go back to the server and get the new page instead of displaying the one in its memory cache Doing this is called a force reload To force reload on the Mac, hold down the Option key While the Option key is down, click the Reload button or choose Super Reload from the View menu (In Netscape Communicator 4, you can also force reload with the Shift key) To force reload in Windows Netscape, hold down the Shift key While the Shift key is down, click the Reload button or choose Reload from the View menu In Internet Explorer, the Refresh button is supposed to act as a force reload button It doesn t always work If the Shift key doesn t work in your browser, try the Alt key 6 Continue checking all pages, fixing things, uploading corrected files, and reloading the new ones to see how they look
1 5 : H O W T O U P L O A D A N D U P D A T E Y O U R S I T E 267 Ooops! How did this mistake sneak through all the testing? Open the page in your web authoring software and fix it Save it After you make and save the change on the page, use your ftp client and drag the changed page into the server folder Since the changed page has exactly the same name as the old page, the old one will be replaced by the new, changed one To delete a file from your web site: in your ftp client, select the file, then look through the menus for a Delete file command In your browser, Reload or Refresh the page If your browser doesn t display the changes, try holding the Option, Shift, or Alt key down and clicking the Reload or Refresh button again
268 T H E N O N - D E S I G N E R S D E S I G N B O O K Updating files You are going to want to update your files regularly You will especially want to update them once you see how easy it is in fact, you already went through the updating process on the previous page, while fixing your web pages It s simply a matter of making changes on the page, then uploading them into the same server folder, replacing the older one Let s say you want to change your family newsletter every two weeks The page is already created and every two weeks you change the text If nothing changes but the text and/or graphics on this one page, then all you have to do is upload this new page and the new graphics directly into your server folder (just like you uploaded the fixes, as shown on the previous page) As you ve discovered, if this new newsletter web page has the exact same HTML name as the existing newsletter web page you want to change, then this new one will drop in and replace the existing page But let s say you add an entirely new section altogether Let s say you add a New Babies section to your family web site because suddenly seven of your grandchildren are having babies This means you ll have several new files for the new section This also means your home page and probably other pages will have changes any page on which you add a new link to this New Babies section must be replaced So every page that has any change on it, plus the new pages for the new section, need to be uploaded The new pages will be added to the collection The changed pages will be replaced Additional web sites on your site If you want to add a whole new web site, all you need to do is upload the entire web site folder into your folder on the server Let s say you (your name is Matilda) have a web site address like this: wwwcoyotecom/matilda You have paid for 5 megabtyes of web site storage space, but you only use 15 MB, so you want to put your son s web site up with yours Your son creates his web site and puts it all in one folder His folder is named wilford You upload his folder, wilford, and drop it inside of your folder, matilda His web address will then be: wwwcoyotecom/matilda/wilford Each slash tells the browser to look down one more level, into another folder So this address tells the browser, Go to the domain coyotecom Look there for the folder matilda Look inside matilda for the folder called wilford The browser knows, when it looks inside wilford, to find and display the indexhtm file So your children could create their own web sites, put them into folders, and you can upload their folders inside of your own If they want to upload more files or update existing ones, they can go to your folder, double-click their own folders, and drag files into it Easier than you thought?
1 5 : H O W T O U P L O A D A N D U P D A T E Y O U R S I T E 269 When I did a web design workshop in Santa Fe, I made a new web page called workshophtml It had a couple of graphics on it So I uploaded all those files into ratzcom The web address of the new page was then wwwratzcom/ workshophtml I also changed the home page in ratzcom so it would have a link to the workshop page That means, of course, that I had to upload the changed home page (defaulthtml) I made the change, uploaded the file, and the new home page with the new link replaced the old home page This ftp window also shows the files that are on the domain ratzcom (same as above, it s just from a different computer and a different ftp client) On the web, you can get to ratzcom by entering wwwratzcom, right? To get to each of the files within ratzcom, you can enter wwwratzcom, add a slash to tell the browser to look inside the ratz folder, then type the name of the file you want to view Let s say you wanted to see columnshtml You would enter wwwratzcom/columnshtml Each folder you see in the above window is another self-contained unit My friend Julie Conner has her web site on ratzcom, stored inside the folder called conner Thus the address to her site is wwwratzcom/conner The browser will go to ratzcom The slash tells it to look down one more l evel, to a folder called conner if the browser is not told to find a specific HTML file (such as columnshtml ), it will look for and display the indexhtml or defaulthtml that it finds within that folder So when you see a long web address divided by slashes, it s an indication of a large domain with lots of subfolders which contain subfolders, etc, until you get to the HTML file, which is the actual web page: http://wwwdomaincom/folder1/folder2/folder3/folder4/folder5/webpagehtm
270 T H E N O N - D E S I G N E R S D E S I G N B O O K Quiz! Answer these questions to make sure you understand how to upload and update your files Use the dialog box and folder window below to answer most of the questions Oh boy, it s a 1 If you made a change to the web page quoteshtml in your web authoring software and posted it to this folder on the server, would it: a update an existing file b be added as a new page to the web site 2 If you made a brand new web page, saved it as seahtml, and posted it to this folder on the server, would it: a update an existing file b be added as a new page to the web site 3 If you uploaded just the page in Question 2, above, would there be a link to get to this new page? If not, what should you do? a Don t worry there would already be links to this page because they are created automatically when you make new pages b No, there would not be a link; you need to make links on pages and upload every page with the new link 4 How many of the files above should not have been uploaded? Which ones? a two b three 5 If you added a new photo to an existing page on your site, how many files would you have to upload? a one graphic file b one web page file c one graphic file and one web page 6 If you remove three pages from your site, would you have to do any other updating to the site? a Change the photograph of your grandmother b Remove the links from remaining pages and upload those changes 7 If you add a web site folder called oceanmist, to the above window, what would the site s address be? a wwwseamaidcom/oceanmist b wwwoceanmistcom 8 What would the file structure look like for this web address (that is, name the folders inside of folders and any web pages): wwwseamaidcom/oceanmist/foam/moonladyhtm