Tt
Click this widget to change the font size.
CC
Click this widget to change contrast.

Home Page 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Links | Search | Bio |

Guide to HTML, CSS, and JavaScript (Buffalo State University Version)


Chapter 1: Servers, Clients, and File Storage

When you use your browser to visit a web page your browser sends a request out via the internet to find the machine that web page is hosted on. That machine is known as a "web server" (*server*). The machine you are sending the request from is known as the *client*. The web server is available 24x7 and makes your files available via the internet. The files on your local machine (*client*) cannot be accessed by anyone via the internet. The web server has some disk space allocated for the files that it uses to send back to the browser. The browser is responsible for rendering (displaying) the web page based on the files (text, images, media, etc.) it receives from the web server.

So, you need a web server where you can upload your files so they can be displayed when someone visits your web site. If you are a student then, most likely, your school provides you with a small amount of disk space on their web servers. If you need to create a site that is not school related, then you need to either rent space from a web hosting company or use one of the many free web site providers.

Since this textbook is directed towards students, I'm going to use the Buffalo State University web servers in my examples.

There are many ways to connect to a web server so you can manage your files. Check with your school for information about using their web server and downloading any necessary software. You could use any of these methods: SSH/vim/SFTP, edit/SFTP.

SSH/vim

One way to manage your web site files is to connect to your web server via a secure telnet connection (known as an SSH client). If you are using a Windows machine I recommend using putty and for a Mac I recommend using the "Terminal (ssh)" application. You need to know some connection settings for your SSH client. Using the bscacad3.buffalostate.edu server as an example, here are the necessary settings:

Figure 1-1: Putty Settings

After logging in to your account you can use the Unix shell commands to manage your files.

Unix Commands

Your files are stored in a directory (folder) which is setup and named a certain way so that the web server can find your files when someone enters your URL in their browser address window or clicks a link that goes to your web page. For my examples that directory is called *public_html*. Again, using bscacad3.buffalostate.edu as an example, the URL of your web site would be:

http://bscacad3.buffalostate.edu/~your-bsu-username

For example, my URL is: http://bscacad3.buffalostate.edu/~gerlanjr/

After logging in to your web server account you need to issue the command 'cd public_html' to change your working directory to your *public_html* folder where the files are stored that will make up your web site.

Your web pages are simple text files that have HTML tags that advise the browser how to render the look of your web page, including any images or hyperlinks are included on your web page. Once you place yourself in your *public_html* folder you can use the *vim* editor to create and modify your files. *vim* is a modified (improved) version of the *vi* editor. It is fairly easy to learn the handful of commands you need to create and maintain the files you'll need for the tasks in this guide. You can use the *man vim* command at the Unix prompt to get helpful information about using the *vim* editor.

Edit/SFTP

You will also need an SFTP (Secure File Transfer Protocol) client for your machine so you can upload any non-text files such as images, media (audio and video), and Java applets. If you are using a Windows machine, I recommend using FileZilla and for a Mac I recommend CyberDuck. Again, using the bscacad3.buffalostate.edu server as an example, here are the necessary SFTP settings:

Figure 1-2: Filezilla SFTP Settings

Another method for maintaining your web files is to use an HTML editor on your local machine to create and edit your files and then use one of the above mentioned SFTP clients to upload and download your files to your web server.

This guide is intended for you to learn the HTML, CSS, and JavaScript language syntax. So, I do not recommend using any of the WYSIWYG (What You See Is What You Get) web site editors that create the actual HTML code for you. You will learn more by typing in the HTML, CSS, and JavaScript tags, and commands. Notepad++) is a great text editor for Windows. *Notepad++* has syntax color highlighting for HTML, CSS and JavaScript files. *Notepad++* also has a built-in *NppFTP* plugin that allows you to connect to your web server file space via SFTP so you can edit your files directly on your web server via your Windows machine. Here are the steps:

  1. Click the Plugins menu
  2. Choose: NppFTP
  3. Choose: Show NppFTP Window
  4. Click on the Settings (looks like a gear) icon
  5. Choose: Profile Settings
  6. Click: Add New
  7. Hostname: bscacad3.buffalostate.edu
  8. Click on the Connection Type:: SFTP
  9. Port: 22
  10. Enter your your-bsu-username and your-bsu-password
  11. Rename that Profile to: BSC3
  12. Click: Close
  13. From the (Dis)connect (looks like 2 plugs), chose: BSC3
Figure 1-3: Notepad++ Settings

If all goes well your file should be listed in the left window.

On your Mac you can use *BBedit* to edit your files. Notepad++) is a great text editor for Windows. *Notepad++* has syntax color highlighting for HTML, CSS and JavaScript files. *Notepad++* also has a built-in *NppFTP* plugin that allows you to connect to your web server file space via SFTP so you can edit your files directly on your web server via your Windows machine. Here are the steps:

  1. Connect to: bscacad3.buffalostate.edu
  2. Click on the Connection Type:: SFTP
  3. Port: 22
  4. Enter your your-bsu-username and your-bsu-password
  5. Click: Connect
Figure 1-4: BBedit Settings

If all goes well your file should be listed in the left window.

For SFTP on a Mac, use CyberDuck to upload/download your files.

Figure 1-5: Cy berduck SFTP Settings

Help contribute to my OER Resources. Donate with PayPal button via my PayPal account.
Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2016-2024 Jim Gerland