Conversion to HTML5 from HTML or part way

I built a website in 2000 and wrote all of my codes–I am not an expert but I know enough to do what I want. My site has over 500 pages with a lot of photos and some rigged animation (I copied codes from other sites and made them work for me). It’s 99% original with my photos and the narratives and poetry is all original–it took me about five years to complete.

Now I see that HTML5 is the standard and some of the details, most notably, the fixed background is not working. I want to transition to HTML5 but am afraid it will take 'till eternity, and I still know the old code better.

I was wondering if I could temporarily keep my old code but make the background fixed without having to change the entire website or page? Is there some wizard that can help me do my entire website in under ten years?

The good news is that backgrounds are CSS, not HTML, so you should be able to do that using CSS and leave the HTML mostly alone.

The html has all the coding it needs, and I don’t have a CSS. I think I may have tried to create one once but as far as I know the coding is still about 95% what you would’ve seen 17 years ago.

So what exactly does that mean? Do I leave the coding the same and then create a CSS with the only command being to fix the background?

It’s hard to say without seeing the code, but I suspect css is the way forward.
Do you have a sample of code you can post?

Does that mean that all your styling (CSS) is mixed in with the html on your pages (inline styles)?. If that’s the case, that would need to be removed and placed in a CSS stylesheet. It might take a bit of time, but in the long run it is worth it because, for example, you only need to state one style for a certain type of heading, instead of putting it in all the places where that heading is. And if you decide to change the colour of the heading, you would only have to do it once, not each time a heading occurs.

1 Like

This is the index page but you get the point–just click on “view source”

http://mr-horsey.com/

OK, I was expecting the code to be a bit dated, but it’s quite invalid to, well due for an update.
But yes, you need to replace (both) opening body tags with just a basic <body> tag without all that stuff in it.
Then add a simple css to set the background for the body.

I never had a styling sheet. I started the site in late 1999/2000 and just kept copying and pasting the basics every time I made a new page. It works.

If you right-click on that page and select “View Page Source” you will see some of the code is red. Those are errors that need to be fixed. (To check more carefully, you should use a code validator - https://validator.w3.org/). What you have is not even correct html (although html is more lenient than xhtml).

You can work on upgrading your html to html5 gradually without having your website out of commission until you complete it (and it won’t take you five years, because you have the basics there).

I would start with a doctype - place <!DOCTYPE html> at the very top of each page.

1 Like

I was looking for a basic framework that I could use and then start adding in what I needed–like CSS for dummies. I found on page on the net but the result didn’t work well. Or perhaps some site that would walk me through the transition.

Do all pages have that same background, or do you have different ones on other pages?

Most have different backgrounds–there are common themes but it’s basically a gigantic narrated photo album. There are probably at least 20 different backgrounds, and I don’t know where to start on the animation.

If all pages follow the same/similar format, you could take a lot of the donkey work out of it by templating a page and inserting content server-side.

I would leave the animation until you had all the rest of the updating done. The idea is to do the structure first (the html5), then the appearance and styles (the CSS) and then the bells and whistles.

That’s doable. You can state how the background displays in a global css that all pages link to.

body {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

Then set the individual image in the head section.

<style>
      body { background-image: url(../images/background.jpg); }
</style>

Since the pages are going to be reworked anyway, I would be tempted to give the body tags a class value eg.

<body class="contact"> 
<body class="about">

etc. and then have this in the CSS file

body.contact { background-image: url(../images/contact-background.jpg); } 
body.about { background-image: url(../images/about-background.jpg); } 

Doing this would provide an easy selector to use for other page specific CSS if you ever decide you wanted such eg.

body.contact div { font-weight: bold; } 
1 Like

Actually you have three opening body tags. :open_mouth:
For your “quick fix” just putting that right, consolidating all their collective attributes to a single tag may fix the fixed background.

That is one option, but…

That may be a lot of classes. If there are not that many unique backgrounds, it may still be practical though.

At the risk of causing offence :grimacing: that page tells me you don’t know the old code that well.
I would recommend you make a fresh start and learn html5 & css3. The good news is: it’s easier to work with than than that old stuff once you get the concept of separating content from styling. It changed for a reason.

With >500 pages learning a tad of back-end scripting too may be time well spent. It does not have to that in-depth. Maybe just how to create an html template and use includes.
Like anything, it’s only as complex as you want to make it.

I don’t know it that well, but I know it well enough for what I was using it for. The first page was the first one made–and as I progressed I found a lot of crap in the first page. Either way, it worked and trying to clean up 500 pages was too much effort for little return. Some of the later pages are very stripped down as I found there were some things I didn’t need.

I took a web design class 4 1/2 years ago but since I was still in school I didn’t have the time to fix the entire site. It was working fine back then and I was so afraid I’d do it wrong and it would stop working. Now I have the time but I forgot so much from the class. I needed some practical application after that but was too busy training for the Ironman and other things.

This is where learning some new tricks comes in.
Using css makes maintaining and editing your styling for the whole site way easier and faster.
For example in that page I found the string ‘font-size:16px’ eleven times, how many times is it in the entire site?
If you wanted to change that to 18px, or to em units for better accessibility, how much work would it be?
With css it’s one line of code. The same goes for any style tweak.
Likewise with an html template, you can alter the page structure once for every page in the entire site.
Yes, it takes time to learn, but it saves you time/work in the long run.