Home Pauline Howto Articles Uniquely NZ 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.

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;
}

 

<-- <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>

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="general.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="javascript:fbpopitup('contact_form.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>

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="general.css">

<!-- <td align=center"> -->
<td class="center"> <!-- Note td.center is in css include file general.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">

<-- <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.

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. Some of the apparent repitition is because some lead to an immediate find and replace. Others always seem to go together.

Tools and Tips

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

 

Home Pauline Howto Articles Uniquely NZ Small Firms Search
Copyright © Peter and Pauline Curtis
Layout revised: 11th June, 2015
Settings - opens in a new window or tab Link to W3C HTML5 Validator