Guide to HTML, CSS, and JavaScript (University at Buffalo 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 University at Buffalo 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, or UBfs (University at Buffalo File System).
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 homepages.buffalo.edu
server as an example, here are the necessary 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 homepages.buffalo.edu
as an example, the URL of your web site would be:
http://buffalo.edu/~root
For example, my URL is: http://buffalo.edu/~gerland/
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 homepages.buffalo.edu
server as an example, here are the necessary 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:
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:
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.
UBfs
The University at Buffalo offers a *cloud-like* file storage system that allows you to connect to your web server files directly from your local machine. If yu are off-campus, you need to first establish a secure VPN (Virtual Private Network) connection via [Windows] (Secure VPN for Windows) or a [Mac] ( Secure VPN for Mac). Once you have your VPN connection you can [Map a Drive on your Windows machine] (Accessing UBfs on Windows) or [Create a Web Folder on your Mac] (Accessing UBfs on a Mac).