How to Update a Website, HTML based
Creating a website is different from updating one that already exists. Both are doable, but updating is simpler. In this post I’ll go over how to update a site that doesn’t use a CMS. Just standard HTML (although PHP would be fine too).
I’m assuming the computer the updates are being made on already has all necessary software installed and configured. If not, you’ll want to get help with that. Initial setup is outside the scope of this post.
Big Picture Overview
1 Prep files/text
2 Modify local files
3 Upload files to server
4 Confirm update
General Computer Tips
First, some general computer usage tips, feel free to skip over.
Keyboard shortcuts will make your life easier. For example, ctrl+c is copy, ctrl+v is paste, ctrl+z is undo, ctrl+s is save. Generally they will show up in menus next to the command they do.
Folder locations will be given as \something. This references the top folder of the website files, You’ll have to figure out where that is locally, but whoever initially setup your site should be able to tell you. Worse case scenario, you can redownload from the server.
Files come in many formats. For websites, images tend to work best as .jpg, .gif, or .png. .pdf files can be viewed near universally. Office files (.doc, .xls, and similar), not as easily, and should be converted to .pdf. As pdf’s aren’t the easiest to edit, might as well upload the original office file too. That way it can be found to change, if such is needed in the future. These are general guidelines, there will be times when you’ll want to do something different.
1 Prep files/text
Details for this will vary based on intended change. On the simple side, it could be just a few words of text. A single file (image, pdf, etc) would be more complex, while multiple files would be even more so.
For simple text, just having it is all you need. Maybe you copy/paste from an email, it’s in word, or just something you know. However is convenient.
For files, they will have to be moved to the appropriate folder and format. Where this is will depend considerable on how the site was organized to start with. In a general sense this means images in the \image folder, while pdf’s go in their topical folder (\documents, \maps, etc). Might also need to convert formats, such as saving a word file as a pdf. Or adjusting an image. If the image format isn’t good, anything on the screen can be turned into an image using ‘print screen’ and then pasting it into Paint (not Paint 3D).
2 Modify local files
This is the most complicated part, and most likely where things go wrong. To assist, some general coding tips:
If opening a tag, must included the closing tag. <a href> needs a matching </a> at the end. Same with <h3> and it’s matching </h3>, etc. <br> is an exception, it needs no closing tag. You can put as much between the opening and closing tags as you want (including more tags).
Indenting can be used to help organize the code, but is not necessary. The code will work without it, but it will make it easier to sort through later.
Copy/paste file names, avoids typos (which happen surprisingly often).
Case is sensitive. IE “file” and “File” are two different things.
To start modifying, open the appropriate file in your editor, it will likely end with either .htm or .php. For example, index.htm or index.php is usually the front page. Other pages should (hopefully) have self explanatory names. You may have a more advanced editor available, but if all else fails Notepad++ will do the job. Regardless, the basics of changing the file are the same: find a section that does what you want and copy/paste it to where you want the change to occur. Then change the text in the copy. Common changes include adding a block of text and/or an image.
Samples
Below are a pair of samples, one for text only, one for an image. Replace the all capitol REPLACEME in order to use them. They would be pasted in where you wanted the new text/image to appear. Could even merge them if you wanted, having an image with text above/below it. Exact syntax for the code (contained inside the < and > characters) is important, while the text you swap in is entirely up to you.
Sample text block:
<h3>REPLACEME</h3>
<br>
REPLACEME<br>
<br>
REPLACEME<br>
<br>
<h3> indicates ‘this is a heading, and should be formatted as such’. <br> is interpreted as ‘end this line’. Used to end paragraphs and creating blank lines. Otherwise, everything posted is considered one long line of text, even if it doesn’t look it in the editor.
Sample image block:
<a href=”https://REPLACEME”><img style=”max-width: 100%; height: auto;” src=”\images\REPLACEME.jpg”></a>
<br>
This sticks the image named REPLACEME.jpg on the page, shrinks it a little to better fit, and makes it clickable to send someone to the REPLACEME website. That link could be to the full size image, some other file, or a different website.
Once done editing the files, save them. If you don’t save the file, you can’t upload the new file, and you won’t see the change.
3 Upload files to server
While there are many uploading tools, I like FileZilla, so will be giving directions for that. Connect to the site (button at top left), click on your server name. Left side is local computer, right side is server. It can be color coded by using ‘directory comparison’ (ctrl+o, if not already on). Yellow for files that are only on one side, and green for newer versions. Generally speaking you want to drag the yellow/green files from the left side to the right. Depending on what was changed, could be as simple as uploading one file, or as complicated as… well the skies the limit.
One word of warning: Be careful about dragging things onto folders. It will upload them, but place them inside that folder. Doesn’t do any damage, but may not have the desired effect while also wasting disc space.
As normal file selection methods work (shift/ctrl+click, etc), it is possible to queue up multiple files to upload. Then FileZilla will work through them. Useful if multiple files were changed.
Will likely see a ‘Target file already exists’ warning when uploading files. Unless you know your situation is different, select ‘Overwrite if source newer’ and ‘Always use this action’.
4 Confirm update
Technically this step is optional. You could assume you are practically perfect and skip this. Having said that, I prefer to find out if I did it wrong sooner rather then later.
Open the browser of your choice (Chrome, Firefox, Edge, etc) and go to your site, look for the change you put up. If it’s there, you’re all set. If not, refresh the page (F5) to double check. If it’s still not there, then the question is why.
Most likely reason is a coding mistake in step 2. Could be as simple as a typo on a file name. In any case, go back to step 2 and try to figure out where things went wrong. Then correct it, and continue on (reupload, recheck).
If you’re sure the file was correctly modified, but it’s still not showing, then something else is going on. Could be an upload failure, could be a server issue, could be just about anything. Is a case where errors are your friend, as they point you towards where things went wrong. Which, in turn, takes you down the path to fixing them. But exploring all the possible ways things could go wrong is outside the scope of this post.
In closing
As with most things, the first time you do something is the hardest. With experience and practice it becomes easier. So try making a few changes that are relatively simple to practice. Add future events early, put up a picture, whatever fits your situation. If all goes right, then you can leave the changes. Or take them back down, at your discretion.
The link below is a good source for more information. It’s oriented towards creating a website from scratch, but much of it’s information is just as valid for updating one that already exists.
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web
This came about as I was writing something very similar for someone else. Figured, as I had already done most of this, might as well turn it into a post here. Maybe it will help someone out, maybe not.