Did you know it's possible to edit and create web pages with nothing more sophisticated than Notepad?
This under-rated accessory lurking quietly on most PCs is more powerful than we think. For as well as being a scratch pad and a cut and paste tool, few people ever consider its possibilities in handling HTML.
Say, for instance, you're not completely happy with a web page on your site and want to tinker with it in a completely safe environment – Notepad is the answer. Browse to the page as normal and then go Page/Source in Internet Explorer 7 or View/Source Code in Firefox. By default this opens a window in Notepad displaying the source code of the page, which can then be saved as a file to the user's hard drive.
Saved as a .txt file, the source code is just that, but save the same document by manually adding an HTML file extension and you have a fully functioning web page. With an exact copy of the page, minus the odd graphic here and there, it is possible to play around with it, experiment and discover how the underlying source code works, all safe in the knowledge there's zero risk involved for the live site.
To edit your replica page, right click the file on your hard disk, select Open With and then Notepad from the drop down list. This again opens the source code. Now, this will look unfriendly but don't worry. The bit you will be most interested in lies between the <body> tags.
If you can't find what you are looking for, go Ctrl F and enter a word or phrase in the search box to home in on its location within the source code. When you've made changes and wish to see the result, go Save As and save the edited page as .html. This will overwrite the dummy page you started with, so you may wish instead to save the changes under a slightly different file name in order to see each stage of the editing process by saving separate versions of the page.
After saving, close the text page you were working on and browse to the new HTML file and open in a web browser to review your handiwork. This is a good way, though not necessarily the best way, to learn the nuts and bolts of how HTML works.
Remember that the main navigation won't usually be editable as this forms part of the site's template. Equally uneditable will be stuff like scripts and anything governed by style sheets. However, since that isn't the point of the exercise, we needn't worry too much. The main thrust of messing about like this is to learn how to manipulate the content and gain a better understanding of how a page fits together. It's quick, dirty and free.
Although source code can appear daunting, ultimately it is a series of on and off switches, the 0 and 1s that make up the term digital. For example, the tag <b> signifies that what follows should be rendered as bold. This instruction is carried out until the browser finds the bold off switch, which is </b>
Take this piece of code:
<b>This is all bold text</b>
<p>And this is normal, this is <i>italics</i> and this is <u>underlined</u></p>
and copy and paste it into a Notepad file, save as .html and then open with your browser. Have a go yourself from scratch with a blank Notepad document, the <p> tag stands for paragraph. It's not so difficult.
What you can do to edit a page on an existing site is to download the source code as discussed and edit the text by selecting everything that sits between the <body> and </body> tags. Paste the text including the tags into a new Notepad document, edit and save. If you prefer, paste into a Word document and edit in there to take advantage of spell checking etc, but always save the final version back into Notepad as Word exports masses of junk characters into HTML.
Next, paste the new text back into the source code you downloaded from the site, being careful to place it between the body tags. Assuming you have FTP access to your site, login and browse to the page you wish to change. Do not under any circumstances delete this page, but rename it. The normal convention is to put OLD onto the end of the file name.
Having saved your edited page in Notepad as a .html file, upload this to your site in the usual way and you’re done. Always check the page that you have uploaded by going to your live site. Remember to refresh the page by pressing F5 or clicking the refresh button, otherwise you will be viewing an old version of the page from browsing history.
If the page looks okay, give yourself a pat on the back. If your new page is all over the place, log back into your site via FTP and remove the OLD from the original page by renaming. This will immediately overwrite your disaster and return everything back to the way it was.
Be aware that this is a very low tech, oily rag means of learning raw HTML and doing site updates on the cheap. Next time we will look at less potentially hair-raising methods of learning coding and doing site updates.
