neat tool to replace html tags with & equivalents

If you want to show html tags in a readers view of the browser you have to use there & equivalent.

This can be tiresome if you have a lot to change.

However this neat little site will do it for you postable

I used it to prepare previous post.

Embedded ordered lists within another ordered list

I thought following was W3C valid

<ol>
<li>Next page</li>
<ol>
<li>Links to other pages</li>
<li>Images</li>
</ol>
<li>Next page</li>
<ol>
<li>Change colours</li>
</ol>
</ol>

Which produces

1. Next page
1. Links to other pages
2. Images
2. Next page
1. Change colours

But although it worked W3C said it was not valid and insisted on 

<ol>
<li>Next page</li>
<li style="list-style: none">
<ol>
<li>Links to other pages</li>
<li>Images</li>
</ol>
</li>
<li>Next page</li>
<li style="list-style: none">
<ol>
<li>Change colours</li>
</ol>
</li>
</ol>

Which produced similar

1. Next page
2. 
   
   1. Links to other pages
   2. Images
3. Next page
4. 
   
   1. Change colours

Keep ul ol tags outside of p tag

Always thought you could embed html list commands within paragraph, but on using w3C validator I see this is not correct. They should be treated like h1 etc

HTML-Kit 292 Tip 002 - Increasing workspace explorer width

The workspace is the window within HTML-Kit which shows folders and files on your disk and/or server.

I became frustrated by the narrowness of this window, so it was difficult to identify files without using horizontal scroll bar. At first could not see how increase this width until I realised that by "grabbing" the top bar and moving mouse you can un-dock the workspace window which you can then float to wherever you want it, inside or outside the main HTML-Kit window.

Once it is in float mode the width can be increase in similar method of dragging a side similar to any other window. You can then re-dock the window on the side by again grabbing the top edge and dragging until pointer is touching HTML-Kit main window edge where it will snap into a docked window again but with the new width.

Following Youtube video shows this in action.

HTML-Kit 292 Tip 001 - Seeing PHP Output

I described stumbling across PHP Processor and how it worked with HTML-Kit in previous post.

One thing I felt was missing was the ability to see the native HTML final code that was presented to browser.

Whilst developing a simple PHP file in HTML-Kit I had the Windows Explorer file folder open in a separate window and I noticed that when I previewed the PHP a temporary .html file was created. This did not show up in the in-built HTML-Kit file window as this has to be refreshed manually.

By opening this temporary file in editor I confirmed it was the output from PHP and I was also able to send this to W3C validator to confirm it was all valid code. Note these temporary files do not last long, so if you want to keep a copy then save it with another name.

I am going to see if I can do a YouTube video showing this in action.

HTML-Kit Build 292 Editor

In an earlier blog entry I discussed editors and tools for developing web sites. I had originally dismissed HTML-kit 292 Build, primarily because I found it hard to understand.

However I gave it another go and I now prefer it, so it will probably end up as my HTML/CSS editor of choice.

A useful introductory tutorial is available here.  It contains a link to a PDF version if you want to download a hard copy. Note this is only an introduction and HTML-Kit appears to be very powerful. I propose to add hints and tips on this blog as I learn to use it.

Including Files in HTML using PHP

Not interested in the waffle, then page down to Links paragraph at bottom

WHY PHP (waffle)

Creating a web site using native tools has advantages and disadvantages, but I have decided to see how practical it is.

One disadvantage is common code, say a menus system on the top of each page, could be in multiple pages, perhaps 30 or so. If this needs to be changed, say you add a new section to the site that needs to be addressed by the menu system, all these have to be updated. As well as being tedious this can also lead to inconsistencies, similar to redundant data in data bases.

This seems obvious to me, but there appears to be no HTML command eqivalent to an include in programming languages. Even more so considering that CSS existence is based upon this approach, albeit using a different method.

The solution may be PHP (PHP- Hypertext Preprocessor) not sure what first P stands for!

PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. It is open source project and works on most Apche servers, included by the free web hosting service I use, Zymic.

PHP does masses of things, neatly all of which I have never used or understand, but including HTML code from one file into a "master" HTML file is easy. Easy once you realise that the name of the files have to have extension .php and  not .htm. The PHP changes the final "built" file to .htm before it presents it to the browser.

This is fine except I had compatibility errors reported by W3C validator when XML header was present, and no way I thought at first, of previewing results before uploading server and accessing file as a normal user.

After a couple of hours I realised you can overcome problem by not including the first line command that declares xml such as

?xml version="1.0" encoding="UTF-8"?

however this is probably a retrograde step.

So I decided not to use PHP and deciding to use HTMLKit as my editor I started  learning how to drive the editor, and there on the first page was reference on how to install PHP Preprocessor on a Windows PC.

Really easy to install. I guessed I would need to also install a plugin into HTMLKit before it started to work, but not so. Once PHP installed I opened two PHP files I had built earlier, previewed them with editor preview option and they worked as if native HTML and same again when previewed in browser. So now the second objection has been removed I will proceed with the PHP

LINKS

Here are relevant links for download and more information.

PHP  Main PHP website


How to install PHP on the local computer Page from HTMLKit support that shows links to relevant download sites etc.

HTMLKit Note HTMLKit 292 is the free version, HTMLKit Tools is not free.

HTML/CSS Editors

 Writing web pages using the base mark-up languages HTML and CSS is much easier with a few basic editor and tools. Here is a list of ones I use:

Note Tab Pro

I have been a user of NoteTab Pro for many years now. There is a small charge of $30  for the Pro and $20 for the Standard version but you can use the Lite version for free, but this has many of the useful features missing.

It has clip libraries" that provide HTML and CSS tags and templatesI wrote my wife's Fascinating Fungi Ceramic Models web site using this editor a few years back

CoffeeCup HTML Editor

There is a free version and one for $49. I have downloaded both and considering the latter to see if it has enough advantage to make it worthwhile.

If I decide to keep only the free version then some of the options only available in the none-free version can be achieved with the following two free offerings.

•  CSS Menu Generator
  
  
  Interactive tool to create drop down menus using CSS
  
  
• JustStyle CSS Editor
  
  Creates CSS files easily using tags. Only just started with this so the jury is still out.

Total Commander

This is a file utility, synchroniser etc but also performs excellently as an FTP tool. I have used this utility for many years in all Microsoft versions from Windows 95 to Windows 7.

CoffeeCup provides FT facility but for moving large number of files this is better.

Free Web Host

Over the last couple of years most of my web development has been done using Google Site and/or Google Docs. Nothing wrong with these, in fact I would recommend them to any one.

Of course one great advantage of using these tools is you also get a lot of free web space provided to you by Mr. Google. This restrained me from looking for web hosts as one of my traits is a great reluctance to spend money.

So when I decided to look again at developing web pages, initially with Serif Web Plus and currently in native HTML, I researched and googled and ended up with using Zymic. Free hosting, 5000 MB of space and PHP (although I did not realise what this was at the time but see later post).

I have also registered web address RoderickT from 123-reg for £2.99 a year. Within 123-REG I have set this address to forward to my Zymic http://roderickt.uuuq.com/  and I am set and ready to go!

Note the above RoderickT site is just a development test vehicle at the moment

Introduction

I am again investigating developing web pages using native HTML and CSS with a good editor, hopefully using free tools or at least very inexpensive tools.

I have written web sites this way several years ago, see www.fascinatingfungi.co.uk as an example. I then explored several on-line development tools. Great for quick results but usually end up spending time fudging things to work the way you want to. I still use Google Sites extensively though, see an example of one here Maths RoderickT .

I then purchased  Serif Web Plus, upgraded it to release X2 but bulked at the price at upgrading to X4. A good product but I grew weary of it.

Connected with web design is my main interest in photography. I use FlickR both to show my better photos but also as a means of backing them up online. I have purchased the very reasonable Pro  account for , if I remember correctly, $24 a year. With all the photos stored here you can make extensive use of them from your own web pages with standard links. You can see some examples of this, again using Google Sites, here  Writing Web Pages.