f



Converting old code to be html5 conformant

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
0
Robert
9/28/2016 1:01:01 AM
comp.authoring.html 7078 articles. 0 followers. Post Follow

13 Replies
449 Views

Similar Articles

[PageSpeed] 18
See related articles to this posting 


On 2016-09-29 02:22, Adrienne Boswell wrote:
> Robert Prins <robert@prino.org> wrote
>
>> 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/stori
>> es/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%20I
>> HHC%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
>
> 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.

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
-- 
Robert AH Prins
robert(a)prino(d)org
0
Robert
9/29/2016 1:01:01 AM 
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... :(

Robert
-- 
Robert AH Prins
robert(a)prino(d)org
0
Robert
9/29/2016 1:01:01 AM 
Robert Prins <robert@prino.org> wrote

> 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/stori
> es/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%20I
> HHC%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

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
0
Adrienne
9/29/2016 2:22:21 AM 
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
0
Stan
9/29/2016 2:35:37 AM 
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
0
Osmo
9/29/2016 3:34:44 AM 
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/
0
Jukka
9/29/2016 4:34:20 AM 
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/
0
Jukka
9/29/2016 10:32:13 AM 
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/
0
Scott
9/29/2016 12:18:30 PM 
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.

Robert
-- 
Robert AH Prins
robert(a)prino(d)org
0
Robert
10/1/2016 1:01:01 AM 
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
0
Osmo
10/1/2016 4:03:38 AM 
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/
0
Jukka
10/1/2016 12:12:07 PM 
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.



-- 
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
0
Stan
10/2/2016 11:36:20 AM 
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.
0
tlvp
10/3/2016 3:30:23 AM
Reply: