So, you’re ready to take a stab at editing your website yourself, but you’re not sure how to do it. Making basic updates to your web pages is something you can do yourself with a little patience and the right approach. Let’s take a look at how to go about the task of updating your website.
Determining How Your Website is Built
The first thing you need to do when you want to update your website is figure out how exactly the website was built. Generally speaking, there are three main possibilities here:
- Your website was built using an independent website builder site like Weebly and the files are on their server.
- Your website was built using html and the files are all on your server.
- Your website was built using a content management system like WordPress and the files are on your server.
To determine this, you can look for clues. If the person who built your website didn’t give you instructions or tell you how they did it, you can look in the footer of your website to see if it includes a “Built using such and such tool” line of text.
If you don’t see anything of that sort, you can right-click the web page and select “View Page Source” to see the code. You don’t need to be able to make sense of all of the code, but try to look for useful clues like “Joomla!” or “WordPress” throughout the code.
You can also log into your server using FTP, and see if the file or folder names and structure provide any clues. If you’re still clueless as to how the website was built, you may want to get in touch with your hosting company and ask for some website help.
If your website was built using a third-party website
If your website was built using an online website builder tool, you’ll need to edit your web pages using their tool. You’ll want to contact them to obtain your login info, and familiarize yourself with their interface.
If your website was build using html or Dreamweaver
If your website is basic html and was coded by hand or using a website builder tool like Dreamweaver, you can edit your web pages by hand using basic html codes or a website editor tool such as Dreamweaver or Kompozer (a free alternative to Dreamweaver).
If your website was built using a content management system
If your website was built using a content management system (like WordPress, Joomla! or CMS Made Simple) which exists on your server, you’ll need to obtain the login address and username/password to gain access to the admin which will allow you to modify pages.
Downloading the Web Page
If your website was built using a content management system, whether hosted on your own website or another, you’ll probably want to stop here and contact your developer or the CMS provider for info on how to get into your account and get website help. If your website was built using html or Dreamweaver, you can begin the process of updating your website by first downloading the web page you want to edit.
First, log in to your web server using an FTP program, and download the page you want to edit into an empty folder on your computer (I typically create a parent folder with the name of the website, and include folders for “Backups” and “Live Website” inside, which helps keep me organized).
If you aren’t familiar with transferring files via FTP, have no fear — you can easily learn how to upload files using FTP.
The file you’re looking for on the server will probably (though not always) have the same name as it appears in the address bar of your web browser. For example, if you want to edit http://www.yourwebsite.com/contact-us.html, you’ll likely be looking for the “contact-us.html” file on your server.
Creating a Backup of the Web Page
Once you’ve downloaded your web page, the first (and absolutely most important thing) you need to do is create a backup. This will ensure that no matter what happens, there’s no way you can break your website and be unable to fix it.
Before making any edits, you can copy the file into your backups folder (and place it inside of its own folder with the date). Leave this file alone, in its original condition, and edit the copy in your “Live Website” folder.
Before editing your website, you should almost always make a backup of your entire website, even if you’re just editing one page. Why? Let’s say you upload the lone file to the wrong place on your server and it overwrites something else (something … important!) you’ll be able to fix it by uploading your backup.
Editing the Web Page
Once you’ve backed up the file for the page you want to edit (and hopefully your entire site), you can now edit the file. To edit a file, you have basically two options:
- Edit your web page by hand using html
- Edit your web page using a WYSIWYG editor like Dreamweaver
Let’s look at these two web page editing options a bit more closely.
Editing your web page by hand using html
To edit your web page by hand, simply right-click it and open it using a text editor like Notepad. You can also open it in Dreamweaver and edit it in “Code” mode. This will display all of the html that makes up your web page.
While it might look overwhelming, it’s actually just a combination of very specifically structured tags that each do a pretty simple thing and all come together to render your page. If you’re seriously interested in making updates to your website, you should probably take the time to familiarize yourself with the basic html codes and how they behave.
Even if you end up using Dreamweaver to edit your web pages, having basic html knowledge will ensure that you use the tool the correct way, and can jump into “Code” mode to edit the html directly when the tool is failing to do it correctly (as if often the case!).
Editing your web page using a web editor tool
To edit your web page with a visual, drag-and-drop interface with buttons to align text, insert images, etc, you’ll want to purchase a copy of Dreamweaver or download the free alternative Kompozer.
When you open your file in one of these programs, they give you what is known as a WYSIWYG view of your web page (which stands for “What You See Is What You Get”). The text and images will be arranged (sort of) like they will appear on the actual page, and there is a toolbar with buttons for common formatting needs much like you see in a word processor like Microsoft Word.
While these tools can make it easy for someone with no html knowledge whatsoever to make quick edits to a page, it’s probably best to do only that (quick edits to text blocks) to your pages using the editor. While they do their best, these editors often make mistakes and end up causing your website problems.
Uploading the Web Page to Your Website
Once you’ve edited your web page, it’s now time to send it back up to the server so you can view the new version in your web browser.
If you used an editor tool to modify your page, you can use the built-in FTP functionality to upload your page. Whether you used a tool or modified the page by hand, I always recommend uploading the page back to the server using FTP so that you can do it carefully and ensure it overwrites only the file it’s supposed to.
No matter how you edit your website, the most important thing is to back it up first. If you have a good backup of your entire site, even if something goes horribly wrong you can put it back to where it was. This will give you security, and will also make you less afraid to dig into the html and start editing (and learning).
Enjoy!
Zachary Coyne is a freelance website designer and developer in Tucson, Arizona. Zach has been designing, developing, fixing and updating websites for the better part of a decade. He enjoys helping people learn how to fix and update their websites, and offers one on one 