Home Uniquely NZ Travel Howto Pauline Small Firms Search
Web Site Design
Converting from HTML 4.01 Transitional to HTML 5


This page is still very much under development. The intention is to keep updating it with our experiences making the transition.

It was initially only accessible from the Mobile Friendly Web Site Design Page

Introduction

The conversion from 4.01 to 5 involves several major steps.

The idea is to separate out the formating and use CSS to control the style and layout of multiple Web pages all at once. It can also be used in individual tags but in a way that a global find and replace rarely works. To show the scope of the problem the <center> tag has been removed and the attribute align=left|right|center again has disappeared. The css methods for center also differ for inline and block tags. Tables also become a nightmare to understand and multiple tricks are required to replace hspace, vspace, padding, cellspacing, border, bordercolor, and background colour etc. However, once the initial changes had been made the advantages in flexibility become clear when it came to implementing a Responsive Web Design approach to making the site Mobile-Friendly.

There are no automated tools to carry out the conversion. I have searched the web extensively and only found the view that it is not possible to automate conversion. There are testing and validation tools which can offer considerable help in identifying the areas that must be changed.

Now lets have a look at a real case which exercises some of the more difficult issues. My standard display of pictures uses a table which has 4 pictures per row centered in its cells against a white background and is centered on the page. It starts as a fixed percentage width until window is shrunk to the size of the images. The image img tag has a width and height defines so the page renders correctly before they are loaded. The cells and image should not have a border. The image is actually part of a link which is generated on the fly but that is not of the essence here.

This raises how to center blocks and images and define width of images and tables as well as backgrounds and borders. Some of the css is in the general css file and some is in the table itself or the image. In the css linked file or the header we have.

table, td, tr {
  border: 0px solid black;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

table.pictureblock {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

td.pictureblock {
  text-align: center;
}

and in the page code we have:

<-- <table style=" margin-left:auto; margin-right:auto; background-color: white; width:80%; "> -->
    <table class="pictureblock">
       <tr>
          <td class="pictureblock"> <script>hbox('nz08/img_2837','Two Fokker triplanes on the attack', 'center' )</script></td>
          <td><IMG src= "nz08/img_2806i.jpg" alt="Fokker Triplane (img_2806)" title="Fokker Triplane (img_2806)" style="width:160px; height:120px; padding:10px; display:block; margin-left:auto; margin-right:auto; ">
          <td class="pictureblock"> <script>vbox('nz08/img_2969','Kiwi Blue parachutists', 'center' )</script></td>
          <td class="pictureblock"> <script>hbox('nz08/img_3026','Australian F-111 dumping and burning fuel', 'center' )</script></td>
       </tr>
    </table>

Now lets look at the header and footer changes:

My Template code for top and bottom of HTML5
The items in Red are manditory or very important

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"
>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="responsive.css">
<script src="ebox.js" ></script>
<meta name="AUTHOR" content="Dr P Curtis">
<meta name="description" content="************">
<meta name="KEYWORDS" content="*************">
<title>...Title - SubTitle........</title>
</head>

<body onUnload="tidy()" class="plaingreyback" >
<div class="howtolimitwidth960">
<table style="width:100%;">
<tr >
<td class="homebar" > <a class="homebar" href="homepage.htm">Home</a> </td>
<td class="pemcbar" > <a class="pemcbar" href="pemc.htm">Pauline</a> </td>
<td class="howtobar" > <a class="howtobar" href="howto.htm" >Howto&nbsp;Articles</a> </td>

<td class="unzbar" > <a class="unzbar" href="nzguide.htm">Uniquely&nbsp;NZ</a> </td>
<td class="sfbar" > <a class="sfbar" href="enterprise.htm">Small&nbsp;Firms</a> </td>
<td class="srchbar" > <a class="srchbar" href="site-search.htm">Search</a> </td>
</tr>
</table>


<table style="width:100%; padding-top:2px;">
<tr>
<td class="howtotitle"> ......Title........ <br>
<span style="font-size: 80%;">.......SubTitle.......</span> </td>
</tr>
</table>

<p>....................................
.........................................<p>

<--- Example Block of Pictures -->

<table class="pictureblock">
<tr>
<td class="pictureblock" > <script>hbox('nz08/img_2806','Fokker Triplane', 'gallery1' )</script></td>
<td class="pictureblock" > <script>hbox('nz08/img_2804','Replica Pfalz DIII', 'gallery1' )</script></td>
<td class="pictureblock" > <script>hbox('nz08/img_2803','Nieuport II', 'gallery1' )</script></td>
</tr>

</table>

<p>....................................
.........................................<p>

<table style="width:100%;">
<tr >
<td class="homebar" > <a class="homebar" href="homepage.htm">Home</a> </td>
<td class="pemcbar" > <a class="pemcbar" href="pemc.htm">Pauline</a> </td>
<td class="howtobar" > <a class="howtobar" href="howto.htm" >Howto&nbsp;Articles</a> </td>

<td class="unzbar" > <a class="unzbar" href="nzguide.htm">Uniquely&nbsp;NZ</a> </td>
<td class="sfbar" > <a class="sfbar" href="enterprise.htm">Small&nbsp;Firms</a> </td>
<td class="srchbar" > <a class="srchbar" href="site-search.htm">Search</a> </td>
</tr>
</table>


<table style="width:100%; border-collapse: collapse;" >
<tr>
<td class="homefooter" > <a class="homebar" href="copyright.htm" title="Formal Copyright Information and guidelines on use of our text, pictures and JavaScript">Copyright</a> &copy; <a class="homebar" href="contact.htm" title="Feedback and Contact Form with Email Link" >Peter and Pauline Curtis</a><br>
Most recent significant revision: Content revised: 9<sup>th</sup> January, 2015 </td>
<td class="homefooter" style="width: 200px; "> <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="gallery/html5.png" alt="Link to W3C HTML5 Validator" title="Link to W3C HTML5 Validator" style="height: 32px; width: 32px; float: right;"></a> </td>
</tr>
</table>
</div>
</body>
</html>

Note: This covers the first stage of changes but does not include the further changes to picture blocks to avoid the responsive rewriting by use of Media Styles which is covered separately.

Some Typical changes

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<!DOCTYPE html lang="en-GB">

<!-- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> -->
<meta charset="utf-8">

<!-- <link rel="stylesheet" href="general.css" type="text/css"> -->
<link rel="stylesheet" href="responsive.css">

<!-- <td align=center"> -->
<td class="center"> <!-- Note td.center is in css include file responsive.css -->

<!-- align="left" -->
style="float:left;"

<!-- <table width="80% border="0" cellpadding="0" cellspacing="0""> -->
<table style="width:80%; border-collapse: collapse; ">

<!-- <table align="center" bgcolor="white" width="80%" border="0" cellspacing=0 cellpadding=5> -->
<table style=" margin-left: auto; margin-right: auto; background-color: white; width:80%; ">
or
<table class="pictureblock">

<!-- <br clear="left"> -->
<br style="clear:left; >

or for a more general clear replace <br clear.....> with:
<p/><p style="clear:both>

<-- <font color="#ff0000">red text</font> -->
<span style="color:#ff0000;">red text</span>
or
<span class="red"> <!-- Note .red is in css include file responsive.css -->

<-- <a name="anchor"></a> -->
<a id="anchor"></a>
or add the id to next tag

The above list also gives ideas for searches to find out if any atributes remain in the page.

Suggested Search Terms to locate atributes which require changing to CSS

My current searches are always case insensitive and include:

  1. <center>
  2. align=center
  3. align="center
  4. <font
  5. <a name="
  6. width=
  7. height=
  8. align=
  9. clear=
  10. type="text/javascript"
  11. type="text
  12. background=
  13. bgcolor=
  14. border=
  15. cellpadding=
  16. cellspacing=
  17. text=
  18. link=
  19. vlink=
  20. alink=

The first 10 usually catch all the problems in the content - I completely replace the header and footers. Some of the apparent repitition is because some lead to an immediate find and replace. Others always seem to go together.

Tools and Tips

CopyQ application

Perhaps the most important tool in updateing has been the CopyQ clipboard manager – a desktop application which stores content of the system clipboard whenever it changes and allows to search the history and copy it back to the system clipboard or paste it directly to other applications. It has a sophisticated tab mechanism which enables me to store headers, footers and various other 'snippets' required for each of the major page types on separate tabs. CopyQ is available for all major operating systems and is in the Mint repositories. It is unusually well documented and offers a huge range of possibilities - I am only exploiting a few

It is normally accessed from the toolbar tray but I have also set it up so that it is opened by a system shortcut key of Ctrl Alt C (Preferences -> Shortcuts -> Global -> Show/Hide main window) and use the option to paste into the cursor position from CopyQ by a return.

So I can select the complete existiong header in an editor, open CopyQ by Ctrl Alt C selet the tab and snippet, Enter and on to the next. The snippets as I am calling the items on the CopyQ tabs can be edited in situ by F2 (or an external editor) so it is easy to set the date in the footer block for the day or the bulk of the title in the header. Individual items on a tab or the clipboard history can be pinned in positin which also gives protection against accidental deletion and can then be accessed by a single number ready for pasting via a Return. It is possible to configure a tree view of tabs in use. It is already obvious that one does not want to lose the hard work in setting up and there is an Export command (Export on file menu) which enable selective exporting of tabs.

Beautification of javascript files

It is important that the layout has correct indentation etc if the code is to be easily understood. There is and online beautification tool which I have used at http://www.jsbeautifier.org/

Comparison of Files

Most of you will be aware of terminal programs such as diff but meld has an excellent graphical interface and allows one to merge and edit files in a GUI interface is ideal when debugging code including applets. It is in the normal Ubuntu and Mint Repositories but needs to be installed.

LiveReload

LiveReload monitors for changes in a folder and automatically reloads the browser if any change is detected. Also, when you change a CSS file or image, the browser is updated instantly without even reloading the page. I generally use two windows side by side with the editor on the left and a browser using LiveReload on the right so one can see changes instantly.

Installing LiveReload is a simple process in Linux. To install LiveReload one must first instal rubygems, then guard and finally guard-livereload:

sudo apt-get install ruby-dev
sudo gem install rdoc -V
sudo gem install guard -V
sudo gem install guard-livereload -V

Then create a new file named .Guardfile in your home directory. Put the following in the file and save it.

# https://github.com/guard/guard-livereload
guard :livereload do
watch(%r{.+.(css|js|htm|html)$})
end

This will watch the directories (that we're working on) for the changes in css, js, htm and html files inside them (or in their subdirectories).

Next instal a LiveReload extension for your web-browser. It is this extension that refreshes the page after receiving command from guard-livereload app. Extensions are available for Chrome, Firefox and Safari.

Once you have it installed on your browser, bring up your terminal and browse to the directory where your web files (html, htm, css, js) are located. Then type guard and press enter. You can watch the operation in the terminal

Open up the HTML file on your browser, and press on the LiveReload button (which is located in the main toolbar in Chrome and Safari & in the add-on toolbar in Firefox). The LiveReload button should now be active (red).

Leave the terminal running and make changes to your site and when you save the file, the changes will be reflected immediately on the browser and you can see a record in the terminal. When you have finished type exit

pcurtis@defiant:~$ cd "/media/DATA/My Web Site" && guard
05:18:59 - INFO - LiveReload is waiting for a browser to connect.
05:19:04 - INFO - Browser connected.
05:19:07 - INFO - Guard is now watching at '/media/DATA/My Web Site'
05:19:21 - INFO - Reloading browser: lightbox.htm
05:19:31 - INFO - Reloading browser: lightbox.htm
05:20:00 - INFO - Reloading browser: lightbox.htm
[1] guard(main)> exit

08:50:52 - INFO - Bye bye...

I run with an editor and a browser in half width windows beside each other and use Ctrl S frequently to save and view the changes

HTML tidy5 Installation and use

This first requires one to load some standard tools - you may have some already but running the following in a terminal only loads or updates them if required.

sudo apt-get install git-core automake libtool cmake make

We now need to clone the files needed to install tidy5 from a GIT repository using the first of the tools we installed

git clone https://github.com/w3c/tidy-html5

This places everything in the new folder tidy-html-5 and we need to change to that a sub-folder by

cd tidy-html5/build/cmake

and the following two commands create all the files and install them in the correct places (This is what my terminal log says I did but it is different to the inbuilt instructions.

cmake ~/tidy-html5
sudo make install

I run from a terminal like this:

cd "/media/DATA/My Web Site" && tidy5 -e html5conversion.htm

which assumes the web site is in folder My Web Site on a data partition /media/DATA.

The -e option just lists errors rather than produce a 'tidy' version. You can get a list of options by man tidy5

Updating to use Media Queries [WIP]

Repeated edits to update picture blocks.

Background: There are three main formats for picture blocks in use. In all cases scripting is used to expand to the complex code required by writing on the fly as the page loads. This saves long strings with the same text for title, alt statements etc. All three have the same basic 'function parameters' - an 'image location', a 'title string' and a 'position' parameter (which becomes muti-use in the case of lightbox displays) and all expect images in triplicates in 4:3 or 3:4 aspect ratio. The small 'icon' image is always 160 x 120 or 120 x 160 pixels and ends in i the middle size is always 400 x 300 or 300 x 400 pixels and ends in w and is used for compact popup displays which are being phased out. The large images are used primarily for lightbox displays and the size is not baked in but historically were 600 x 450 and now 800 x 600 is the norm. Popups shrink this to be 600 x 450 pixels.

The first two formats were basically the same and used tables for layout and adapted the layout on the fly. Both depended an a reload to respond to window/screen size changes. Version two used a single script round the whole table and wrote the table details <table>, <tr> and <td> etc by function calls as well as the reponsivePictureblockSplit(n) call

Original type of block using table

<table class="pictureblock">
  <tr>
    <td class="pictureblock"><script>hpop('2011/qe11/img_3231', ' &copy; P Curtis 2011', 'center' )</script></td>
    <td class="pictureblock"><script>vpop('2011/qe11/img_3243', ' &copy; P Curtis 2011', 'center' )</script></td>
    <script>reponsivePictureblockSplit(2)</script>
    <td class="pictureblock"><script>hpop('2011/qe11/img_3244', ' &copy; P Curtis 2011', 'center' )</script></td>
    <script>reponsivePictureblockSplit(3)</script>
    <td class="pictureblock"><script>vpop('2011/qe11/img_3248', ' &copy; P Curtis 2011', 'center' )</script></td>
  </tr>
</table>

Single script block with table codes written in scripts

<script>
 tableCpictureblock();tr();
   tdCpictureblock();hpop('2018/qv18ev/',' &copy; P Curtis 2018', 'center' );tdE();
   tdCpictureblock();vpop('2018/qv18ev/',' &copy; P Curtis 2018', 'center' );tdE();
   reponsivePictureblockSplit(2);
   tdCpictureblock();hpop('2018/qv18ev/',' &copy; P Curtis 2018', 'center' );tdE();
   reponsivePictureblockSplit(3);
   tdCpictureblock();vpop('2018/qv18ev/',' &copy; P Curtis 2018', 'center' );tdE();
 trE();tableE()
</script>

New Solution without tables and depending on Media Queries to adapt the css dynamically with the need for reloading pages


<div class="picFrame">
  <div class=pic><script>hpic('2019/auqe19/',' &copy; P Curtis 2019', 'center' )</script></div>
  <div class=pic><script>vpic('2019/auqe19/',' &copy; P Curtis 2019', 'center' )</script></div>
  <div class=pic><script>hpic('2019/auqe19/',' &copy; P Curtis 2019', 'center' )</script></div>
  <div class=pic><script>vpic('2019/auqe19/',' &copy; P Curtis 2019', 'center' )</script></div>
</div>

The transformation of either type needs 5 repeated edits and deletion of n-1 responsivePictureblockSplit elements. Often pages will have both sorts.

Dreamweaver is capable of handling large numbers of open pages and I have used up to thirty for repeated edits. A certain ammount of checking and hand crafting is always needed.

So where are the priorities. Our world cruises are arguable the most import and comprise 33 pages between them it is logical to complete the other two holidays in 2017 for another 11 parts. New Zealand 2016 is important with the Wanaka air show and has 18 parts but 2017 is small at 6 parts and should be included. This would in total mean we completed the coverage of 3 years with 68 pages. So three multiple repeating edits of circa 25 pages each seems to be on the way forwards.

Updating Active Maps

This is the other area where changes are needed. Once the size has reduced to below the width of an Active Map it has tobe replaced by an image which shrinks to fit.

The old code used code like this:

<div class="center">

  <div
id="activeMap center " >
    
<img src="2017/qv17xm_map.jpg" style="width:600px; height:450px;" usemap="#qv17xm_map1" alt="Map">
    <map name="qv17xm_map1">
      <area shape="rect" coords="165,10,515,58" href="qv17xm-p1.htm#soton" alt="Introduction and Embarkation at Southampton" title="Introduction and Embarkation at Southampton">
    </map>
  </div>

  <div id="shrinkableMap center " >
    <img src="2017/qv17xm_map.jpg" style="max-width:95%; height:auto;" alt="Map">
  </div>

 <script>ResponsiveShowHide(isFourCols(),"activeMap","shrinkableMap")</script>
</div>

and the new code is

<div id="activeMap" class="showLarge center">
  <img src="2019/qe19ne_map.jpg" alt="Map" width="600" height="400" usemap="#qe19ne_map">
  <map name="qe19ne_map">
    <area shape="rect" coords="6,320,197,398" href="qe19ne-p1.htm#soton" alt="Southampton, UK" title="Southampton, UK">
  </map>
</div>

<div id="shrinkableMap" class="showMedium center">
  <img src="2019/qe19ne_map.jpg" style="max-width:95%; height:auto;" alt="Map">
</div>

So the changes are:

Which is a considerable simplification

 


Link to W3C HTML5 Validator Copyright © Peter & Pauline Curtis
Fonts revised: 28th April, 2021