The experiences of an Australian student who uses Linux.

Cover all topics from shell scripts to monopolies and reviews to political comments.

Future-Proof journal

Posted 04-03-2010 at 12:18 AM by William (Dthdealer)
Updated 04-03-2010 at 12:19 AM by William (Dthdealer)

Template for a future-proof journal in HTML and CSS. Future proof for the file is practically plain text and if in the future W3C finally loses its grip and web browsers disappear as we know them, you can still extract your information.

This follows my comment on Penguinator's blog post on Plain Text

There are three basic files

The index
An example journal entry
The CSS file handling all styles for the journal

Pop each into their filenames in the same directory as each other and open up index.html in your favourite webbrowser.

index.html

Code:

<html>
<!-- 
     I have not declared what version of HTML I am using.  
     Seeing as this document is going to be simple, it really does 
     not matter if the browser opens the page in quirks mode or
     not.  This document is designed to be future-proof, and
     because HTML is basically plain text with more formatting its
     contents can be extracted easily even in a future without web
     browsers. 
     
     The sole rule in this is not to use special formatting or
     exact alignment of things.  These documents should look 
     professional on paper as well as screen, so the only ways
     you should ever use size ( width and height ) values are:
      1. In IMG tags so that the browser can continue loading
         the rest of the page with an empty box where the image
     is to be until it gets around to the image.
      2. Percentage widths for tables.  Using no width and height
         settings is better.  Colspan and Rowspan are very useful.
      3. Don't set sizes in the Stylesheets other than percentage.
     
     Feel free to build on this example and distribute it as long
     as it remains 100% free, open, future versions under the same
     licence and I am credited as the original author.
     
     William Hales 2010
-->

<head>
    <!-- Try and keep this exactly the same as the title in the <h1> element later -->
    <title> Index of William's Journal </title> 
    <!-- Practically you should only ever use this one stylesheet -->
    <link href="masterstyle.css" rel="stylesheet" type="text/css">
</head>

<body class="index">

<h1> Index of William's Journal </h1>

<p> Any notes you want to make here.  If this journal is on a removable
device for example, state here your address and/or phone number. </p>
<p>  I use the date format
YYYY-MM-DD as the files are in order when sorted alphabetically in a 
file manager. </p>

<!-- Use horizontal rules as dividers.  They can easily be styled in
     your stylesheet -->

<hr>

<!-- Divide your entries however you want.  It is up to you! 
     Here I divide them into Years and then months       -->
     
<h2> Journal entries for 2010 </h2>
<table>
<tr> <th colspan="3"> April </th> </tr>
<tr>
    <td> <a href=2010-04-01.html>2010-04-01</a> </td>
    <td> Fell for Tremulous re-licencing joke <br> NB this link actually points somewhere </td>
    <td> Gaming </td>
</tr>
<tr> <th colspan="3"> March </th> </tr>
<tr>
    <td> <a href=2010-03-18.html>2010-03-18</a> </td>
    <td> Raffle to collect money to eat souls </td>
    <td> Buisness, Family </td>
</tr>
<tr>
    <td> <a href=2010-03-08.html>2010-03-08</a> </td>
    <td> Family vampirised by Joey </td>
    <td> Family </td>
</tr>
<tr> <th colspan="3"> February </th> </tr>
<tr>
    <td> <a href=2010-02-07.html>2010-02-07</a> </td>
    <td> Joey is acting strange </td>
    <td> Family </td>
</tr>
<tr>
    <td> <a href=2010-02-05.html>2010-02-05</a> </td>
    <td> Charges dropped against my brother, Joey! </td>
    <td> Family, Legal struggle </td>
</tr>
<tr> <th colspan="3"> January </th> </tr>
<tr>
    <td> <a href=2010-01-26.html>2010-01-26</a> </td>
    <td> Hopefully next is the final month of Court </td>
    <td> Family, Legal struggle </td>
</tr>
<tr>
    <td> <a href=2010-01-15.html>2010-01-15</a> </td>
    <td> Jury bribed with Gold </td>
    <td> Family, Legal struggle </td>
</tr>
<tr>
    <td> <a href=2010-01-02.html>2010-01-02</a> </td>
    <td> Collecting money to bribe court </td>
    <td> Family, Legal struggle </td>
</tr>
</table>
    

<h2> Journal entries for 2009 </h2>
<table>
<tr> <th colspan="3"> December </th> </tr>
<tr>
    <td> <a href=2009-12-26.html>2009-12-26</a> </td>
    <td> Someone let the sheep loose! </td>
    <td> Family </td>
</tr>
<tr>
    <td> <a href=2009-12-24.html>2009-12-24</a> </td>
    <td> Joey demanding ransom </td>
    <td> Family, Legal struggle </td>
</tr>
</table>

<hr>

</body>

</html>

2010-04-01.html

Code:

<html>

<head> 
    <title>2010-04-01 -=- Fell for Tremulous re-licencing joke </title>
    <link href="masterstyle.css" rel="stylesheet" type="text/css">
</head>

<body class="entry">
<h1> 2010-04-01 </h1>

<hr>

<h2> Fell for tremulous re-licencing joke </h2>
<p> This document is only a template for the content it could contain. 
Remeber to KISS ( keep it simple stuipid ) by: </p>
<ol>
    <li> Not using exact pixel measurements, only percentages </li>
    <li> Keeping everything HTML 1.0 ish </li>
    <li> Never using formatting not from the stylesheet apart from bold etc tags </li>
    <li> Not care about tag deprecation of B, U and I tags unless you really want to </li>
    <li> Be freeform in how you write out these entries </li>
</ol>

<table class='mono'> 
<tr><td class='mono'>The 'mono' style table is good for code.  
<br>Note you still have to have BRs or Paragraphs for line-breaks
<br> The reason it is a table style is so that the content is
contained in a box.</td></tr></table>

<hr>

<h2> If you like this system, try DidiWiki </h2>
<p> You can find its source on the Murga Linux ( Puppy Linux ) forums.
DidiWiki kicks ass, being only kilobytes big and easy to setup as a local,
personal blog.

<p><a href="http://www.murga-linux.com/puppy/viewtopic.php?search_id=1293481732&t=47185">http://www.murga-linux.com/puppy/viewtopic.php?search_id=1293481732&t=47185</a></p>
<p> It is in the <b>second</b> post!  The first one contains 0.7, the second 0.8 . </p>

<hr>

<h2> And remember, <i>don't do drugs</i> kids </h2>
<p> Signing off, William Hales 2010 </p>

<hr>

</body>

</html>

and finally, masterstyle.css

Code:

body.entry
{
    background-color: #CCDDFF;
}
body.index
{
    background-color: #FFDDCC;
}

table
{
    border-collapse: collapse;
    width: 95%;
    margin-left:auto;
    margin-right:auto;
}

td
{
    border: 1px dashed black;
    padding: 5px;
    background-color: #FFFFCC;
}

th
{
    padding: 5px;
}

table.mono, td.mono
{
    background-color: #CCFFCC;
    padding: 5px ;
    border: 0px ;
    font-family: monospace;
}

The aim is also to be platform and browser independent. These pages work in everything from elinks and trident ( I.E. ) to webkit and gecko ( F.F. ).

Future-Proof journal

Comments