This guide is for static website owners, who may have had their site designed and developed by a third party, but, would like to make minor amends themselves.
A website is ‘static’ if there is no underlying software running the site (i.e. content management or ecommerce site). The site comprises a collection of files that informs the users web browser how to display the website information.
These files are located in a folder on a web server (often called ‘httpdocs’, ‘www’ or ‘web’). Typical files include:
- HTML files – There will be one file for each page on your website, they contain the textual content, links and structual information about the page. You can recognise these by the file extensions [.htm, .html, or .php]
- Image files – These will be stored in a folder called ‘img’ or ‘images’. Typical file extensions are [.jpg, .png or .gif].
- Style Sheet files – These files describe how the page should be styled (i.e. background colours, fonts etc). They have a [.css] file extension.
So, now we know what comprises a website… how do you go about editing it?
In order to edit your site, you need to download a copy of the files to your home computer. To do this, you need a piece of software called an FTP client (FTP stands for file transfer protocol). We recommend filezilla.
Go to this website: http://filezilla-project.org/download.php and download (typically green ‘sourceforge’ button for windows users).
Install the software and run the program. You should be presented with a screen similar to below:
Now, in order to access the files for your site, you will need to find out the ‘connection information’, from the company that built the site for you. You will need:
d) Port (generally 21)
Fill these into the boxes across the top of the Fillezilla window and click ‘quick connect’. You should then see the box on the right hand side (called ‘remote site’) populate with a collection of folders. Look for a folder called ‘httpdocs’, ‘www’ or ‘web’ and double click. If all has went correctly, you should now see the a collection of files that resemble your website!
Now we have found the files, we need to download them!
First of all, you need to create a home for your website file on your home computer. Open up the file manager, navigate to where you want to store the files, and create a new folder called ‘mywebsite’.
Now, in order to download these files, go back to the filezilla window and navigate to the same location, in the left hand panel of the window (called ‘Local Site’).
You are now ready to transfer files. In order to:
- Download – drag files from the right panel (remote) to the left panel (local).
- Upload – drag files from the left panel (local) to the right panel (remote).
Using the advice above, download the files to your folder called ‘mywebsite’. If you then navigate to the folder using your file manager, you should see the new files in the folder.
OK, you now have a copy of the files, before you even think of touching them, TAKE A COPY! To do this, select everything in the folder, right click mouse and select copy. Go to a new folder called ‘BACKUP_mywebsite’ and paste them into it. Don’t ever edit these files, if you ever have a problem, you can then upload these files back to the server and everything will be reverted back to normal.
Now it is time to edit your files!
For the purposes of this article, we are only looking at making minor textual changes. Therefore, we need to look at the HTML files (.htm, .html or .php). To find the file you want to edit, go to your website, navigate to a page, and look at the address bar. It will look something like this:
To edit this page, we need to look for the file called ‘about-us.htm’. Open this file using a text editor (we recommend notepad).
To perform a simple edit, we recommend searching (CTRL + F) for the words you want to change. Make your edit (be sure not to overwrite any HTML tags i.e. <h1>, <p> or <a>). Save the document. Then upload the individual file back to the webserver (i.e. drag file from left to right in filezilla). You should experiment with very minor changes to begin with.
And that’s it! You just made a minor textual modification to your website.
We strongly recommend that you read our article ‘Understanding the basic HTML building blocks’ for a clearer idea of the contents of the HTML file you just edited. In doing so, you should then be able to make slightly more complicated edits to your webpages.