Posting Your Site to the Web

Created an HTML document? Good for you! Of course, you won't be able to share your genius until you make that document available over the World Wide Web for everyone to see. It's time to use a Web Server. A Web server is simply a computer that serves up Web documents and files via the Internet, so other people can see them. If you want an HTML file to be available to people over the Internet, you have to put it on a Web server.

Generally, people get an account on a Web server where they may place documents for people to see over the Web. The account-holder gets an address to the server, a login name and a password, to ensure control over the material posted there. Files are transferred from one computer to another--from a hard drive or disk to Web space--via FTP, or File Transfer Protocol. We can FTP our Web documents to a Web server, thus making them available to anyone who has access to the World Wide Web.

At one point, the only way to FTP was to use a detailed series of UNIX commands to connect to the server, locate the file on your host computer and then transfer it to your Web space.

Basic FTP software instructions

For this course, no matter how you access the ftp server, you'll need to know:

server/host: ux2.nscc.sccd.ctc.edu
login: your first initial and first 7 letters of your last name
password: your student number
URL for your Website: http://ux2.nscc.sccd.ctc.edu/~yourlogin

(That's a tilde, top left side of the keyboard, followed by your login as described above. Don't go literal on me and type in "yourlogin"; that won't work unless your name is Yolanda Ourlogin or something.)

All your HTML files on the server will be in a directory called public_html. If you don't put the files in or below that directory, they will not be visible on the Web!

(Note: more detailed FTP software instructions for Windows are in this Adobe PDF document: FTP with WS_FTP and Cute FTP.)

Various versions of free Windows FTP software can be found at http://www.shareware.com or http://www.tucows.com/, as can various versions of Fetch, the most popular of the Macintosh FTP programs. (If you're trying to get an FTP program for home, Fetch offers a free version to students, although you may have to read through a lot of fine print to find the free version. Windows users have many free choices, including Filezilla (winning the silly name award), Coffee Cup FreeFTP and EmFTP.)

When you first open an FTP program, you may need to create a new profile or session. A profile is simply a collection of settings giving the software information such as the location of the server and session name.

Once you have typed in your information and clicked okay, the software connects to the server. The information for your Web space on that server will be displayed.

In most FTP programs, you will highlight the document that you wish to transfer and either double-click on it or drag it to the server side of screen. Often, arrows in the middle of the screen can also be used to transfer files from one location to another.

Always transfer text documents (*.htm, *.html, *.txt, *.css--basically, anything you can open in a plain-text editor like Notepad) as ASCII files (text-only), and transfer all other files (images, sounds, Word documents, PDFs, video clips, etc.) as binary files.

Once a file has been transferred, you should be able to see that file in a Web browser by typing in the URL. In many cases, your account name may be incorporated into the URL by means of a tilde ~ or a backslash /.

More detailed information is available here:

        Macintosh: FTP with Fetch

        Windows: FTP with WS_FTP and Cute FTP (this is an Adobe PDF document)

Sometimes, you might encounter a computer that has no GUI (graphic user interface) FTP software installed. Other times you might be in a hurry and not want to wait for the software to load. In cases like these, many people--especially power users--might choose to use command-prompt FTP. Like most command-prompt work, it's not for everyone, but it can be a powerful and fast tool for those who want to use it.

Basic FTP command-line instructions

  1. On a Windows computer, click the Start button and choose Run. In the dialog box, type FTP (enter). With Mac OS X, choose "Terminal" and type FTP (enter). With Unix or Linux, just type FTP (enter) at the command line prompt.
  2. For this example, we'll assume the files you want to transfer are on a floppy disk. At the command line prompt, which should look like this:
FTP >


type the following:

FTP > lcd a:\


(that's LCD, not one c d--it means change local directory, e.g. the one on your computer.) Obviously, if the files you need are in a subdirectory, on your hard drive, etc., you'd need to lcd to where your files are. And remember, most versions of Windows do strange things to directory names that are more than 8 letters long and to file names that exceed the old DOS 8.3 naming convention (eight or less letters, a dot, and three or less letters).
Through this example I repeat the command line prompt. You only need to type the part in bold. After typing each command, you will need to press (enter) to send the command to the remote computer.)

  1. Use the command line prompt to connect to the remote computer:
FTP > open ux2.nscc.sccd.ctc.edu
  1. When prompted, type your login ID (first initial and first 7 letters of last name) and password (student ID), pressing (enter) after each. You won't see your password as you type it.
  2. All your HTML files on the server will be in a directory called public_html. If you don't put the files in or below that directory, they will not be visible on the Web! Use the command line prompt to change to that directory on the server:
 FTP > cd public_html

(Note that it's lcd to change directories on your computer, and cd to change directories on the computer you've connected to. If your files on the remote computer are in a subdirectory of public_html, you'd need to cd again into that subdirectory.)

  1. Want to make a new directory called "final"?
FTP > mkdir final

Want to know what directory (on the server) you're in?

FTP > pwd

Want to see what files are in that directory?

FTP > ls

(That's LS, as in list, not one-s.)
Want to get rid of a file called "file.html"?

FTP > del file.html
  1. To upload or download HTML or text (txt) files, type ascii at the command line
 FTP > ascii

For any other kind of files (images, sounds, Word documents, etc.), type bin at the command line

 FTP > bin
  1. To move a file from your computer to the server, type "put" and the file name. To get a file from the server and transfer it to your computer, type "get" and the file name. When dealing with a bunch of files, you can use "mput" and "mget", and even use an asterisk as a wildcard. Be sure you've got typed bin or ascii depending on what you're doing!
9.    FTP > ascii
 
FTP > put index.html
FTP > get notes.html
FTP > mput thing1.html thing2.html
FTP > mput *.txt
FTP > bin
FTP > put photo.jpg
FTP > get portrait.jpg
FTP > mput sketch.gif draft.jpg button.png
FTP > mget *.gif
  1. All done? Type "bye"
FTP > bye

Today, FTP is often done by using software that automates the process and reduces the once complex UNIX commands to a simple  point and click with your mouse.

You'll still need to know:

server/host: ux2.nscc.sccd.ctc.edu
login: your first initial and first 7 letters of your last name
password: your student number
URL for your Website: http://ux2.nscc.sccd.ctc.edu/~yourlogin

(That's a tilde, top left side of the keyboard, followed by your login as described above. Don't go literal on me and type in "yourlogin"; that won't work unless your name is Yolanda Ourlogin or something.)

Good File Management

Following some basic tips of good file management can save you a lot of pain and gnashing of teeth. Remember, the easiest way to avoid mistakes is not to make them.

        Do not include spaces in file names. As often as not, this will break a Website.

        Use lowercase. On the Web most people write URLs by default in lowercase. Changing the case of your file names may confuse someone trying to find your Web site or type in your URL.

        Remember, the Web is case-sensitive. The file names mypage.html and Mypage.html are completely different as far as the computer is concerned. A link to mypage.html will fail if the actual file name is Mypage.html.

        Avoid symbols in your file names. Although - and _ can be used, they tend to be hard to read when underlined and often lead to mistakes.

        The names of files indicated in your links should be the same as the names of your files. (Duh.) Again, if you have <a href="MyFavoriteFile.htm">Click here</a> and the file name is "myfavoritefile.html", don't expect your link to work.

        All parts of a Web site, including pictures and other files, must FTPd for the complete site to show up on a Web browser.

        Use descriptive names. Calling every file test.html will only confuse you in the long run.

        If you name a file "index.html" on most servers ("default.htm" on older Microsoft servers), this file will be the one that shows up when a user doesn't include a file name in the URL. (For example, when you go to http://www.scn.org/, the page you're actually seeing is http://www.scn.org/index.html.) Depending on server security settings, if there is no file named index.html, the user either sees (1) a list of all files in the directory, or (2) a security error message telling them they're not allowed to see a list of all files in the directory.

        Remember, on the student server at ux2.nscc.sccd.ctc.edu, files must be in the public_html directory if you want them to show up on the web.

Finding a home for your Website on the World-Wide Web

After spending months learning HTML and weeks working, it seems a shame not to post your project for all to see. Additionally, posting your classwork to the Web means that you can work on it from virtually anywhere with Internet access. There are many different options available for Web site hosting.  Determining which one is right for you depends on the purpose of your Web site and the amount of money you feel like spending.  

If your Web site will become the permanent Web page for a commercial organization ...

If your Web site will become a small business site...

If your Web site is a personal or informational Web site, or if you have absolutely no money but still want a Web site....


If your project will become the permanent Web page for a commercial organization ...

If your project will become the permanent Web page for a commercial organization or nonprofit,  you'll need to register a domain name and enter into a hosting agreement with a reputable company.

Registering a domain name consists of checking to see if the name is available and then reserving that name through a domain name registrar.  Using the a whois server on a registrar (such as the Network Solutions WHOIS server http://www.networksolutions.com/), you can check to see if a domain is in use. If the name is available you will need to register the domain name.  Until a few years ago, domain names cost about $70 for a two year registration and $35 per year after that.  However with deregulation, third party vendors and lots of competition, you can register domain names for much less per year. (Check sites such as http://www.register4less.com, http://www.dotster.com/, http://www.godaddy.com/). These fees cover registration of the domain name only and not the space where your Web documents will be housed, although many registrars will sell you hosting services as well.

To actually have space on a Web server, you will need to enter into a contract with an ISP (Internet Service Provider) for Web hosting.  Web hosting is a fee-based service (usually a sign-up fee and/or monthly maintenance fee), where an ISP will lease you space on their Web server. You will have password access, and the IP address for your space will be registered with your domain. (This means anyone typing in your URL will go to your file space.) Some ISPs will also throw in free email addresses, tech support or e-commerce solutions. All ISPs are not created equal: some charge outrageous fees, while others limit the access they allow. Make sure you do your homework.


If your project will become a small business site...

If your project will become a small business site (for instance, for Web design services or a home business), you have several options for getting affordable or free space.

If you need to have your own domain name, there is no way around it--you have to pay the money and register a domain name.  However, that can be done for under $10.00 if you shop around. (Again, check sites such as http://www.register4less.com, http://www.dotster.com/, http://www.godaddy.com/).

Many places on the Web offer low-cost or free sites to small business or individuals.  In some cases these "free" sites offset their cost by having you display their advertising on your Web page.  To save a couple of bucks that you might otherwise put into luxuries like tuition, food, and shelter, this might not be such a bad trade-off, but even better is that for a small fee like $5/month, many will turn the ads off.

Well, it seemed like a good idea at the time: THINK HARD before you pick a domain name. The good folks at Morrison & Foerster, Attorneys at Law, evidently have no children who listen to rap music and no exposure to the language of many parts of the urban United States.

For more information on opening a small business site or online store...

Yahoo- Store!, at http://store.yahoo.com/, will host your Web store for something like $30 a month.  Services include e-commerce solutions and advertising on the Yahoo Store site.

eBay, at stores.eBay.com offers a similar service, from $15.95 a month up, depending on how much business you do.

So does Amazon Marketplace from Amazon.com, and a few hundred others.

Are you dreaming of opening your own e-commerce Web site?  Believe it or not, you can open your own on-line store and never stock an ounce of inventory.  Many on-line stores and merchants offer affiliate or associate  programs.  With an affiliate or associate program, you partner with an on-line retailer. You link to their merchandise and provide any marketing and encourage customers to buy their products. In exchange you receive a percentage of any transactions or purchases referred from your site. In some cases the transaction fee can be 15% or more.... So, if you link to an item on sale for $50 and encourage one person to buy the product, you get 15% of the sale price ($7.50).

There are thousands of affiliate programs and you can sell all kinds of merchandise and services, from books and CDs to Web design and accounting services.

For more information on affiliate and associate programs...

About.com Affiliate Programs
http://html.about.com/compute/html/msubaffiliateprograms.htm

Amazon.com Associates
http://www.amazon.com/associates/


If your project is a personal or informational Web site, or if you have absolutely no money but still want a Web site...

If your project is a personal or informational Web site you might not want to spend money to secure Web space.  Fortunately for us, the World Wide Web is full of low cost or no cost opportunities for hosting Web sites, especially if you don't mind displaying other people's ads.  The sites below offer free or low cost hosting.  Keep in mind that nothing is actually free and many of these sites may require you to display ads, participate in surveys or be subjected to mailing lists.... Also keep in mind that the dot-com fallout is forcing these folks to change their business models without much forewarning to users.

 

Yahoo Geocitites
http://geocities.yahoo.com/

Geocities, now owned by Yahoo, was one of the first places to offer free pages to individuals.  FTP access, 15 megabytes of space and Web site add-ons are just a few of the free features.  Downsides: the addresses are a little scary and advertising pop-up windows can be annoying (though these can be turned off for $4.95/month).

Tripod
http://www.tripod.com

Tripod includes FTP access, 20 megabytes of space and Web site add-ons. Their ads are usually less obnoxious than Geocities', and can be turned off for $4.95/month.

Seattle Community Network
http://www.scn.org/

Want limited Web space, no chance of having your name sold, and no advertising?  SCN, a survivor of the "FreeNet" movement, has some of the strictest privacy rules you can find. It is a no-cost service begun in Seattle as a project of the local chapter of Computer Professionals for Social Responsibility (CPSR, http://www.cpsr.org/) SCN offers email and Web space for individuals (1 MB) or organizations (5MB).  Downsides: some of the long addresses, the Web-posting and editing interface, the limited space available. This is not a commercial business-hosting site, though many nonprofits do find a home there.

Example:
http://www.scn.org/westwood/

Brinkster
http://www.brinkster.com/Hosting/Educational.aspx

Brinkster's "Educational Package" has 15MB Web space, email support, and it allows for some fancy server stuff (.asp, server-side includes, Microsoft Access) that most free services don't offer. There are some restrictions, and they don't let you host audio or video files, but if you want a Windows hosting environment and some of the other extras, this might be the site for you.

Ourmedia.org
http://www.ourmedia.org/

Ourmedia.org promises they will host your files, of any size and any amount, forever. They are in a partnership with with Archive.org, which provides the space. Archive.org's goal is to keep a snapshot of the Web as an archive of what was there at any one time. Since they want to keep a copy of everything ever put on the Web anyway, it's to their advantage to host your content directly.

Free Webspace. Net
http://www.freewebspace.net/

Yahoo's listing of free Web pages
http://dir.yahoo.com/Business_and_Economy/Business_to_Business/
Communications_and_Networking/Internet_and_World_Wide_Web/
Network_Service_Providers/Hosting/Web_Site_Hosting/Free_Hosting/

Terms and concepts to know

FTP
WS_FTP
Cute FTP
Domain Name

Web Hosting
ISP
Web Server

Remember: Always transfer text documents (*.htm, *.html, *.txt, *.css--basically, anything you can open in a plain-text editor like Notepad) as ASCII files (text-only), and transfer all other files (images, sounds, Word documents, PDFs, video clips, etc.) as binary files.


Readings

Register your Domain Name (Inc.com)
http://www.inc.com/articles/details/0,6378,ART13828_CNT56,00.html


More information

Web Hosting

Cnet: Web Hosting
http://www.cnet.com/internet/0-3799.html?tag=dir

Free Webspace. Net
http://www.freewebspace.net/

Seattle Community Network
http://www.scn.org/

Yahoo's listing of free Web pages
http://dir.yahoo.com/Business_and_Economy/Business_to_Business/
Communications_and_Networking/Internet_and_World_Wide_Web/
Network_Service_Providers/Hosting/Web_Site_Hosting/Free_Hosting/

Tripod.com
http://www.tripod.com

Yahoo Geocitites
http://geocities.yahoo.com/

Photo Exercises

At the very least, Web developers need to be able to resize images using some sort of image manipulation program, and save them as Web files (jpg, gif, or png).


Open the file in the image editor of your choice. Use the product's "Help" if necessary to find how to modify the size of the image.


Resize the image as desired, taking care to make certain you don't change the image's proportions.


Save the file as a gif or jpg for the Web. In Fireworks, use the "Export" menu (or "Export Wizard" if you run into problems. In Photoshop, use "Save for Web". In GIMP, just name the file with a .jpg or .gif extension and the program automatically saves it in the right format.

You can attempt the following optional exercise using any one of hundreds of image editing tools.

Look at this explanation of the image-editing toolbar in Photoshop: http://www.newtutorials.com/photoshop-toolbar-tutorial.htm. Toolbar icons are pretty standard, so this image should adequately work for GIMP and Fireworks, even though the order and options might be different.

Check http://www.lehigh.edu/~inimr/fireworks/org_tut.htm for an easy review of steps for this exercise for users of Macromedia Fireworks. There's a good tutorial at http://www.myjanee.com/tuts/moon/moon.htm that covers all the Photoshop steps you'd need to use for this exercise. For GIMP users, start at http://gug.sunsite.dk/docs/Grokking-the-GIMP-v1.0/node30.html for a brief introduction to layer import and export, and then proceed to http://gug.sunsite.dk/docs/Grokking-the-GIMP-v1.0/node66.html for the steps in combining photos into a new one.

Combine any image from column A and any image from Column B into a new image. Click the thumbnails below to get the full-size images. If you prefer to combine two images of your own choice instead of any of these, that's fine.

Use the lasso tool to select the part of the image you want to copy. Edit, copy; then edit, paste into the image. Use the eraser tool to get rid of anything unwanted. Use Modify/transform/scale to resize what you've pasted into the image.

Once combined, resize the new image to a reasonable size for the Web and export it as a .jpg file.

Create a Web page with some text that pertains to your new photo. Upload the whole thing, images and html, to the Web server, and open it from the http://ux2.nscc.sccd.ctc.edu/ server to make sure it works. Copy the URL.

Go to the discussion area called "South Seattle Community College Secrets Revealed". Tell us about the Web page you made--what it's designed to prove, how the color choices you made pertain to the subject matter, the audience such a page like this would be intended to reach, and any other information that will help prepare us for the page. Then, paste in the direct URL to the page you created so we can see it.

Visit everyone else's contributions. Comment on at least three of them.

Column A

Column B


(I have no larger version of this photo)


(I have no larger version of this photo)

 

 

More Photoshop tutorials are available at http://www.newtutorials.com/photoshop-tutorials.htm

Bored? Take this image, turn the day from foggy into sunny, resize it and export it as a jpg.