Guidance for creating and editing website pages
Lesson 8 - Other tools, tips and tricks
Previous Lessons 1, 4 and 5 give details of how to write HTML pages using WYSIWYG and direct-entry methods. Another useful tool for the direct-entry method of doing this is Notepad ++.
It is equally useful for double-checking changes to existing pages as well.
You can get it from: https://notepad-plus-plus.org
The programme is completely free and covered by a GNU General Public License.
It is a more-modern and greatly expanded version of MS Notepad.
Install this program onto your computer.
When you start the programme you should see this screen after clicking 'Open' in 'File' and navigating to the 'template' page as downloaded in the previous lesson (or preferably its renamed duplicate).
This programme is extremely useful for making simple changes to any page - the vast majority of its advanced features are simply not needed for basic changes to the HTML script used for this website.
To preview your work simply click on the 'Run' button and select your choice of browser.
Simply 'Save' and refresh the browser page to see the changes as you make them.
Tips
The primary skill needed to quickly develop and change web pages is the ability to cut, copy and paste sections of text effectively. This process is much faster in many instances than writing code by hand in full. Practice this, and think carefully about repeating pastes - for starting a whole new set of paragraphs for example (<p></p>) - or for repeat 'chunks' of code for galleries etc.
Many useful sections of code are already to be found in other pre-existing pages, amongst them the 'image slider' found on top-level pages and other similar features. Simply call up and save these pages, then open them in one of the image editing tools. Copy out what you need elsewhere and edit it accordingly.
Save your work regularly. There is nothing worse than losing two-hours worth of sometimes quite hard keyboard bashing!
Ordinary MS Notepad is a perfectly acceptable basic HTML editor. Often overlooked, it still has all the core necessary functions needed to perform basic editing work.
It is useful to back-up your own 'Website' folder regularly. You can use previous copies of pages as templates for new ones, the back-up folder, because it will also contain the CSS style sheet and the other necessary images, will operate to display the pages fully in the same way as your primary folder.
Do not modify the CSS style sheet without reference to the site Webmaster - changes to this sheet can have knock-on effects on other possibly unseen pre-existing pages!
There can only be one 'Master' copy of the website - and only one Webmaster. This master copy is controlled by the Webmaster alone and is used as the primary source for uploading pages and images to the website server. An unrecorded change to a page is easily overwritten and reversed on the server if the change was not added to the master copy - a further change to this file will not re-introduce the previous change(s).
Tricks
When writing HTML pages it is (extremely!) useful to offset blocks of text by means of the 'Tab' key to make the text more instantly readable. Browsers by default strip out all empty spaces (beyond singular use) in HTML code so the spacing does not affect the display of the pages in any way. This extra spacing is to the left of the red lines seen below. Do not use 'Spacebar' spacing here - make sure you use the 'Tab' key one, two, three or four times only!
Lines longer than the page width will automatically wrap.
Long pieces of text, which may be complex URLs for example, when they have no spaces in them, may be seen as very long words by the editor and subsequently by the browser used to display them. If these lines of text are seen to flow off the sides of pages alter the format of the text to prevent this from happening.
Individual URLs are written twice in each instance of their displayed use in HTLM code - the first use is to call up the page and the second is to display the URL on the page. The second use does not have to be the same as the first, which itself cannot be altered. Shortening, splitting them into a two-line display with a line-break (<br />) and using substitute words are all acceptable.
WYSIWYG editors can sometimes tie themselves in knots when doing relatively simple changes to the formatting of a page - particularly when using some default page dividers such as the 'clearfix shadow' feature. The code for this is fairly simple but is often more easily added in the direct-input viewing window.
This code, which closed the previous division, adds the 'shadow' dividing effect, and starts a new division is as follows:
...end of previous paragraph</p>
</div>
<div id="content" class="clearfix shadow">
<br />
<p>New paragraph starts here...
Just to reiterate, virtually every HTML tag has to be followed by a matching closing tag. The only exception to this is the line-break tag (<br />), which itself can be used repetitively if needed.
Something in the order of 95% of all HTML editing errors are due to either missing, misformed (without a final > for example) or misplaced closing tags. Bear this strongly in mind if your page doesn't display as you think it should!!!
Finally, you might also find this to be of some use...
Here endeth the eighth and final lesson in web page production!
