Converting old code to be html5 conformant

Robert Prins

unread,

Sep 28, 2016, 7:55:32 PM9/28/16

to

In 2000 I wrote a short article for autostop.lt. The original site was hacked to
pieces, but can still be found using the wayback machine, one copy of my article
can be found at
<http://web.archive.org/web/20090912122413/http://www.autostop.lt/stories/2000prins.html>

Having saved a copy, I've been trying to html5-ize it, and the current version
can be found at
<http://prino.neocities.org/VHHC/VHHC%20-%20Back%20to%20home%20from%20IHHC%204.html>

Yes, I use a different font, justify the paragraphs, changed the GIF's to PNG's,
but in essence I've used the same dreaded way for the layout, nested tables
(removing one so far).

However, if you look at the source of the "new" version, you'll notice a blatant
omission, there is no DOCTYPE tag. If I add one, the layout goes completely
haywire, so the question is, what do I miss?

Thanks,

Robert
--
Robert AH Prins
robert(a)prino(d)org

Adrienne Boswell

unread,

Sep 28, 2016, 10:22:34 PM9/28/16

to

Robert Prins <rob...@prino.org> wrote

Did you run it through the validator?
[https://html5.validator.nu/?doc=http%3A%2F%2Fprino.neocities.org%2FVHHC%
2FVHHC%2520-%2520Back%2520to%2520home%2520from%2520IHHC%
25204.html&showimagereport=yes&showsource=yes]

You might want to fix the errors and then head on over to a CSS group
like comp.infosystems.www.authoring.stylesheets for more CSS help.

--
Adrienne Boswell
http://cavalcade-of-coding.info
http://the-good-plate.com

Stan Brown

unread,

Sep 28, 2016, 10:35:38 PM9/28/16

to

On Thu, 29 Sep 2016 01:59:12 +0000, Robert Prins wrote:
> However, if you look at the source of the "new" version, you'll notice a blatant
> omission, there is no DOCTYPE tag. If I add one, the layout goes completely
> haywire, so the question is, what do I miss?

If I'm not mistaken, the HTML DOCTYPE declaration is

<!DOCTYPE html>

And I don't think I'm mistaken:
http://www.w3schools.com/tags/tag_doctype.asp
http://stackoverflow.com/questions/10963135/what-is-the-correct-way-
to-declare-an-html5-doctype
etc.

I concur with Adrienne's advice to run your pages through the
validator, after you insert the correct DOCTYPE so that the validator
will know what to check for.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://BrownMath.com/
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont

Osmo Saarikumpu

unread,

Sep 28, 2016, 11:34:47 PM9/28/16

to

On 29/09/2016 04:59, Robert Prins wrote:
> However, if you look at the source of the "new" version, you'll notice a
> blatant omission, there is no DOCTYPE tag. If I add one, the layout goes
> completely haywire, so the question is, what do I miss?

Your CSS lengths (the numbers) need corresponding length units. The
length unit is optional only after the number 0. That is, without the
HTML5 doctype the browser is "guessing" that:

margin-left: 10;

means;

margin-left: 10px;

See:

https://developer.mozilla.org/en-US/docs/Web/CSS/length

--
Best wishes, Osmo

Jukka K. Korpela

unread,

Sep 29, 2016, 12:34:21 AM9/29/16

to

29.9.2016, 4:59, Robert Prins wrote:

> Having saved a copy, I've been trying to html5-ize it

Why? What do you expect to gain by doing that?

> However, if you look at the source of the "new" version, you'll notice a
> blatant omission, there is no DOCTYPE tag. If I add one, the layout goes
> completely haywire, so the question is, what do I miss?

You’re missing the effects of Quirks Mode.

As long as you are not using any doctype string, browsers will do the
best they can (in someone’s opinion) to simulate some very old browsers.
As your page was probably designed to work on those browsers, it might
still work decently that way – in Quirks Mode.

If you add e.g. the HTML5 incantation <!doctype HTML>, modern browsers
will do the best they can to implement HTML, CSS, DOM, and other
“standards”, working in “standards mode”. The effects on an old page,
designed for old browsers, vary from no effect to complete disaster.

For some of the details of Quirks Mode, see
http://www.cs.tut.fi/~jkorpela/quirks-mode.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Robert Prins

unread,

Sep 29, 2016, 6:00:37 AM9/29/16

to

I actually used the validator, both with and without a <!DOCTYPE html> tag, and
other than the fact that I get an error more without it, it does not complain
about missing units!

I've now added these, and the page looks way better, but there are still some
problems with the alignment of of the images.

There are now three versions:

1) With just <!DOCTYPE html>

http://prino.neocities.org/VHHC/VHHC%20-%20Back%20to%20home%20from%20IHHC%204.5.html

Two validation errors due to use of align="right" on two TD tags

2) With <!DOCTYPE html> and a CSS ".right" selector

http://prino.neocities.org/VHHC/VHHC%20-%20Back%20to%20home%20from%20IHHC%204.css.html

No validation errors

3) Original, but with px units and removal of border attributes

http://prino.neocities.org/VHHC/VHHC%20-%20Back%20to%20home%20from%20IHHC%204.html

Three errors, no doctype, and the two align="right" ones.

Only the last one shows the page as it should be shown! And no fiddling with
Firebug changes that, probably because I'm not fiddling with the right
properties. :(

Robert Prins

unread,

Sep 29, 2016, 6:05:39 AM9/29/16

to

On 2016-09-29 04:34, Jukka K. Korpela wrote:
> 29.9.2016, 4:59, Robert Prins wrote:
>
>> Having saved a copy, I've been trying to html5-ize it
>
> Why? What do you expect to gain by doing that?

As for the "Why?" of creating this copy? For the same reason that I keep local
copies of two other pages,

<http://prino.neocities.org/Sylvain%20Viard/Sylvain%20Viard.html>

and

<http://prino.neocities.org/suite101/Thumbing%20Around%20Robert%20Prins%20Writes.html>

The former because the original website is gone (and the copy on that site gave
about a zillion validation errors), the latter because Bernd Wechner's ISP has
somewhat of a reliability problem, and my article contains out-of-date links.

>> However, if you look at the source of the "new" version, you'll notice a
>> blatant omission, there is no DOCTYPE tag. If I add one, the layout goes
>> completely haywire, so the question is, what do I miss?
>
> You’re missing the effects of Quirks Mode.
>
> As long as you are not using any doctype string, browsers will do the best they
> can (in someone’s opinion) to simulate some very old browsers. As your page was
> probably designed to work on those browsers,

It dates back to March 2000, so it's a bit old, which probably also explains the
<table>-based layout. :(

> it might still work decently that way – in Quirks Mode.

It actually does render much better than either the version with just a
<!DOCTYPE html> or the version with the additional CSS ".right" selector...

> If you add e.g. the HTML5 incantation <!doctype HTML>, modern browsers will do
> the best they can to implement HTML, CSS, DOM, and other “standards”, working in
> “standards mode”. The effects on an old page, designed for old browsers, vary
> from no effect to complete disaster.
>
> For some of the details of Quirks Mode, see
> http://www.cs.tut.fi/~jkorpela/quirks-mode.html

See my reply to another post in this discussion, still problems... :(

Jukka K. Korpela

unread,

Sep 29, 2016, 6:32:13 AM9/29/16

to

29.9.2016, 15:09, Robert Prins wrote:

> On 2016-09-29 04:34, Jukka K. Korpela wrote:
>> 29.9.2016, 4:59, Robert Prins wrote:
>>
>>> Having saved a copy, I've been trying to html5-ize it
>>
>> Why? What do you expect to gain by doing that?
>
> As for the "Why?" of creating this copy? For the same reason that I keep
> local copies of two other pages

I meant “Why are you trying to html5-ize it?”

> It dates back to March 2000, so it's a bit old, which probably also
> explains the <table>-based layout. :(

Table-based layout as such works with HTML5, too, though most HTML5
advocates frown on it. But table-based layout is one of the issues where
Quirks Mode vs. “standards mode” matters in more than one way.

>> it might still work decently that way – in Quirks Mode.
>
> It actually does render much better than either the version with just a
> <!DOCTYPE html> or the version with the additional CSS ".right" selector...

I don’t follow you. What happens when you try the old page as such, with
no doctype string?

You are referring to problems with display *and* with problems in HTML5
conformance (which is a moving target, and certainly a wrong target if
you just want to put an old page from year 2000 online again). These are
two very different things. If there are display problems with the old
page as such and you are not intending to rewrite the page (probably
fastest to do via complete redesign), then focus on those problems
without trying to be HTML5 conformant.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Scott Bryce

unread,

Sep 29, 2016, 8:18:33 AM9/29/16

to

On 9/29/2016 6:04 AM, Robert Prins wrote:
> I actually used the validator, both with and without a <!DOCTYPE
> html> tag, and other than the fact that I get an error more without
> it, it does not complain about missing units!

Because an HTML validator isn't looking for CSS errors. You also want to
run your page through a CSS valdator.

http://jigsaw.w3.org/css-validator/

Osmo Saarikumpu

unread,

Oct 1, 2016, 12:03:40 AM10/1/16

to

On 29/09/2016 15:04, Robert Prins wrote:
> 3) Original, but with px units and removal of border attributes
>
> http://prino.neocities.org/VHHC/VHHC%20-%20Back%20to%20home%20from%20IHHC%204.html
>
>
> Three errors, no doctype, and the two align="right" ones.
>
> Only the last one shows the page as it should be shown! And no fiddling
> with Firebug changes that, probably because I'm not fiddling with the
> right properties. :(

I'm not sure what you are aiming at, but if you just want it pass
validation and to "look as it should", would not just the following suffice?

1) add the doctype
2) replace align="right" with class="right"
3) add the declaration to your styles:

.right {
text-align: right;
}

--
Best wishes, Osmo

Robert Prins

unread,

Oct 1, 2016, 7:36:20 AM10/1/16

to

On 2016-10-01 04:03, Osmo Saarikumpu wrote:
> On 29/09/2016 15:04, Robert Prins wrote:
>> 3) Original, but with px units and removal of border attributes
>>
>> http://prino.neocities.org/VHHC/VHHC%20-%20Back%20to%20home%20from%20IHHC%204.html
>>
>>
>>
>> Three errors, no doctype, and the two align="right" ones.
>>
>> Only the last one shows the page as it should be shown! And no fiddling
>> with Firebug changes that, probably because I'm not fiddling with the
>> right properties. :(
>
> I'm not sure what you are aiming at, but if you just want it pass validation and
> to "look as it should", would not just the following suffice?
>
> 1) add the doctype

Done in verisons 1 & 2 - formatting wrong!

> 2) replace align="right" with class="right"
> 3) add the declaration to your styles:
>
> .right {
> text-align: right;
> }

Done in version 2 - formatting even more wrong!

And if you compare those (1 & 2) with three, you will see that the do not match,
at least not for me with Palemoon and Firefox (or even IE, 11.0.9600.18376,
W7-64) Only the "quirks" rendered on is OK.

Jukka K. Korpela

unread,

Oct 1, 2016, 8:12:06 AM10/1/16

to

1.10.2016, 16:40, Robert Prins wrote:

>> 1) add the doctype
>
> Done in verisons 1 & 2 - formatting wrong!

As I wrote earlier, this was more or less to be expected.

Consider <!doctype html> as a magic incantation that says “I pray you, o
Browser, to display my document according to the most recent CSS,
JavaScript, and HTML standards you know, instead of trying to simulate
the way browsers worked in 2000 or so”. If you created your document
well over ten years ago and tested it on browsers used then, the odds
are that there is at least something that just doesn’t work when that
prayer is heard by a browser.

If you want to make your page conform to most recent CSS, JavaScript,
and HTML standards, you need to actually know those standards (to a
sufficient degree) and change the page accordingly. Quite often, the
clearly fastest way then is to redesign it from scratch. And you should
not expect any direct gain from this. (It may be useful if you intend to
enhance the page, actually working on it rather than just a conversion
project.)

And it’s actually more about CSS than HTML. Most effects of the magic
incantation relate to CSS (or to default rendering of HTML elements, but
then it’s really a matter of CSS to change that).

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Stan Brown

unread,

Oct 2, 2016, 7:36:23 AM10/2/16

to

On Sat, 1 Oct 2016 13:40:09 +0000, Robert Prins wrote:
> On 2016-10-01 04:03, Osmo Saarikumpu wrote:

> > [quoted text muted]

> > I'm not sure what you are aiming at, but if you just want it pass validation and
> > to "look as it should", would not just the following suffice?
> >
> > 1) add the doctype
>
> Done in verisons 1 & 2 - formatting wrong!

When dealing with computer problems, it helps to use accurate
language.

The formatting is not wrong. It is correct, according to the HTML and
CSS in the page. _Those_ are wrong (in the sense that they don't
produce whatever it is you want).

As several people have said, you don't need to use HTML5 for a page
from the last millennium, but if you do then you must separately
validate the HTML and the CSS. In the process of correcting the
validation errors, you may also make design changes that move the
page toward your desired appearance; or you could first eliminate
every error and then address the design, re-validating periodically.

tlvp

unread,

Oct 2, 2016, 11:30:23 PM10/2/16

to

On Sat, 1 Oct 2016 13:40:09 +0000, Robert Prins wrote:

> ... formatting wrong! ...

The formatting is surely exactly what your code is calling for.
But the code may be wrong for the formatting result you desire.

Sorry that comment doesn't magically fix your page, but it's the key to
*your* getting down to the brass tacks of fixing your code so it can better
realize your formatting vision.

It'll be immaterial whether it's HTML 5 code, or HTML 4.01 code -- so long
as it expresses accurately what your intentions are, and is valid within
its HTML dialect, it'll serve your purpose. HTH. Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.