Best way to learn HTML?

[Attitudeless Badger]

I am looking to do a bit of basic website work and to assist with this would like to learn to program with HTML.   I have got a reasonably logical mind and used to do some programming in BASIC many moons ago and now work a lot doing financial modelling in Excel so the structures and thought process on how to plan things are less of an issue but I need to lean all about the technical stuff and the right tools to use.....

Is there an Online guide/Tutorial or anything that people would recommend, or an 'idiots guide to HTML' book that would be worth getting? I am not looking to get to be an expert at the moment, just enough to build/update a couple of simple websites.    Having read through a few posts on here, I am aware of Wordpress/Blogger, etc solutions but I fancy the challenge of working from the basics up, as it is probably a good skill to have under my belt.

Any suggestions welcome....

[T42]

W3 Schools cover just about everything:

https://www.w3schools.com/

[ian]

While I won't argue with the good sense of understanding the basics of HTML and CSS, does anyone actually write the stuff in 2018?

[Chris S]

While I won't argue with the good sense of understanding the basics of HTML and CSS, does anyone actually write the stuff in 2018?

Sadly, yes. Two projects I'm working on, one with an Angular 4 Front End, the other using ASP.NET, both require UI components to (at least to a degree) be handcrafted with HTML and styled with CSS.

I find CSS is the coding equivalent of herding cats. 

ETA: To the OP - you need to understand that HTML has been taken from one use - a not-very-good document formatting language, and tortured beyond belief to make it some kind of nightmarish platform for applications. Don't expect anything to be logical, consistent, or often even that useful. CSS/Javascript is much more useful, cat-herding tendencies notwithstanding.

[TheLurker]

I find CSS is the coding equivalent of herding cats. 

Hmm.  I wouldn't say it was quite that easy.  At least you can bribe cats with nosh. 

Back on topic...
HTML, the markup bit is straight-forward you'll learn all you need to know about that in under half an hour.

CSS? Well that has a rational basis and the basics aren't that horrid either.  More effort than HTML but not beyond the wit of mortal man. However you'll find that that rational design has been undermined by rubbish / incomplete implementation of CSS standards in the various browsers as well as some browser manufacturers *cough* extending CSS so you will spend hours (if you're lucky) days (weeks) if you're not trying to create a CSS style that works the same and gives a good result in Safari, IE, Opera, FireFox, Pale Moon, {insert browser of choice here} and the rest of them.

What will really do your head in is the rest of the cruft that has been wrapped around, on-top, beside and underneath HTML & CSS.  Oh yes that and the fact that no two browsers adhere to the various "standards" (there's a reason that word is in quotes - I'll let you guess why) in quite the same way, some don't even implement some "standards" at all.  Had I mentioned that already?  Never mind, it bears repeating. Many, many, many times.

And if you want something beyond simple presentation (read-only pages) then, well, we have to have the JavaScript talk and possibly the "Frameworks" talk as well.  I'm sorry but JavaScript is, there is no polite way to put this, an horror story and the various "Frameworks" designed to, excuse me while I split my sides laughing, make things easier are no better. They are generally designed (designed? hah!) by spotty 14 year old oiks, have the supported lifetime of a Mayfly and each one comes in at least 4 mutually incompatible versions so that a JavaScript "library" written to work in/with one framework will almost certainly not work with another framework and almost as certainly won't work with either the previous version or the next but one version of the framework it is supposed to work with. And don't think mutually incompatible versions is the preserve of spotty oiks. Oh dearie me no.  Step forward Microsoft and the change from (IIRC) MVC2 to MVC3. It might have been 3  to 4, but you take my point I trust?

Oh yes and there's JQuery for dynamically altering the appearance of a page and finding stuff on a page as well as Ajax  and Fetch and $deity alone knows what other protocols / libraries for fetching data from servers.

Oh I nearly forgot.  There's the added "joy" of millions (well hundreds of thousands at the very least) of badly written, unsupported and buggy JavaScript libraries riddled with potential security flaws out there ready to trap the unwary programmer and there's next to no _reliable_ vetting system to let you know what's usable and what's not.  Yes NPM and Git I am looking at you.

We haven't even covered deploying the stuff you've created yet, but like any good horror flick we have to leave room for a sequel.

In short if value your sanity and can avoid having anything to with the uncontrolled maniac environment that is web UI development walk away now.  If you really must get involved well, come along in and join the rest of us frogs in the increasingly warm water.

[Chris S]

^ he's not wrong.

[Jaded]

It's when you look at the CSS-morass that a big site like BBC has you realise that CSS probably hasn't turned out like its originators intended...

[ian]

I thought the idea was to separate appearance from structure. Heh heh heh.

[drossall]

Yes, but having done so, it sounds as though they put the appearance down somewhere and can't find it again.

[David Martin]

I have a minor project which involves UI with javascript/css/dom manipulations, occasionally delving into the semi-zombie hell that is SVG with JQuery, and websockets for direct push of data. And a MongoDB/Flask backend.
Having not done this stuff for a while it is a bit slow at present.

Frameworks? By the time I have a) worked out how to use them and b) discovered that they don't quite do what I need, it becomes quicker and less painful to just implement from the ground up.

[Mr Larrington]

Top rant, Mr Lurker

As to the whole back-end business, the obvious answer is to write it in FORTRAN because, as any fule kno, if you can't do it in FORTRAN it's not worth doing at all.

[Attitudeless Badger]

Thanks for the responses, folks.   W3 schools looks like my sort of level to start with, but the other comments are useful too, even the Lurkers rant which does cause me to consider if I really want to open this Pandora's box of delights...

As background, my motivation to do this is that Mrs Badger would like a basic website for her Jewellery business and the local football club could do with something too as the previous website hasn't been updated for a couple of years.  Both of these would probably work with a 'Blog plus' type format where you can post latest news articles, together with some fixed pages around general background, contact details, etc.   Whilst I get the impression that I could probably do something basic within a certain browser environment, the general tone of comments made seem to say it may be better to try to find some form of software that does most of this for you and sorts out things like mobile vs 'full' browser issues and other compatibility stuff. 

Any advice gratefully accepted.....

[citoyen]

Thanks for the responses, folks.   W3 schools looks like my sort of level to start with, but the other comments are useful too, even the Lurkers rant which does cause me to consider if I really want to open this Pandora's box of delights...

As background, my motivation to do this is that Mrs Badger would like a basic website for her Jewellery business and the local football club could do with something too as the previous website hasn't been updated for a couple of years.  Both of these would probably work with a 'Blog plus' type format where you can post latest news articles, together with some fixed pages around general background, contact details, etc.   Whilst I get the impression that I could probably do something basic within a certain browser environment, the general tone of comments made seem to say it may be better to try to find some form of software that does most of this for you and sorts out things like mobile vs 'full' browser issues and other compatibility stuff. 

Any advice gratefully accepted.....

I took on responsibility for running my cycling club's website a few years ago, and the website for my local CAMRA branch. They were relatively straightforward affairs but even so, maintaining them proved a lot of work. Don't underestimate how time consuming it will be.

I already knew HTML, which as noted is pretty straightforward. I taught myself the fundamentals of CSS but as The Lurker says, making it work effectively can be a painful business. Still, at least I knew my site would work on any browser. The previous version of the cycling club's website had been created on MS Frontpage. Its creator was blissfully unaware that the work of art he had created was being rendered as a total mess when viewed in any other browser than Explorer. When he handed the site over to me, I took one look at the code and decided I had to start from scratch rather than try to make any sense of it.

For the CAMRA site, I wanted to create a listing of all the pubs in our branch so I bought a Sitepoint tutorial book to learn how to build a dynamic database-driven website using PHP and MySQL, with a bit of JavaScript. I achieved some quite satisfactory results and found it an interesting learning experience. Sitepoint tutorials always used to be very good but I don't know if they are still. The book I used is out of date now, since the technology has moved on so rapidly.

For basic websites, you can get pretty decent results these days using Wordpress, which offers a load of free templates, many of which are customisable, so you're bound to find something to suit. That is the avenue I would go down for the type of site you're talking about.

[T42]

Yup, you can do a lot with Wordpress.

If you wanted something faster (but not cheaper) to program, you could try Serif. El Presidente does our club site with Serif Webplus X7. He doesn't know anything about programming - his level of computer literacy is that of an average user.

[ian]

Bear in mind that if you ever plan handing over your responsibility for these sites, no one will thank you when they find they have to unentangle your experiments in HTML/CSS. On the other hand, Wordpress etc. is fairly standard these days.

[citoyen]

ETA: To the OP - you need to understand that HTML has been taken from one use - a not-very-good document formatting language, and tortured beyond belief to make it some kind of nightmarish platform for applications. Don't expect anything to be logical, consistent, or often even that useful. CSS/Javascript is much more useful, cat-herding tendencies notwithstanding.

To be fair, when the WWW was first conceived, its creators probably didn't imagine it would ever be more than a collection of linked static documents, so the markup language made a kind of sense.

In the 90s, I was working on guidebooks, which involved outputting listings from a database into WP documents marked up with typesetting codes that looked much the same as HTML. The WWW's origins remain with us in legacy terms like 'web page'.

[Jaded]

I think your choices are along the lines of:

- Become a proper web coder; accepting that takes a lot of time and effort and requires CPD and probably can only be edited by you

- Go for a CMS driven website, such as Wordpress or Concrete 5 or many others; accepting that you'll largely be tramlined into the themes available, customisation brings issues with updating, it has a significantly larger overhead on the server but can be edited by others

-Go for an application that designs websites; accepting that you'll be limited in styles and in order to update the website you'll need the source file and the application.

On OSX I've used several of the latter, including Mobirise. However many are trying to monetise their future with subscriptions
I used to be able to code HTML and then it got complicated. I'll still tinker, but it is tinkering, not designing
I've used Wordpress, but prefer Concrete 5

[Attitudeless Badger]

From Jaded's list, I think it is probably the second option I need.  I did some very basic HTML stuff for my degree back in the early 90's but like car mechanics it appears that what is under the bonnet and you can easily tinker with now is minimal compared to 25 years ago.

Thanks for the answers so far.  I'll have a look at Wordpress/Concrete 5 and see how that feels.

[T42]

Be ye warned: I used Wordpress on our club site ~10 years ago. Once set up, I allowed certain members content-editing privileges, and they f#d up the subtle colour scheme I had spent hours on with garish pink and green text - fairly vomited all over my Mona Lisa.

[citoyen]

I've not heard of Concrete5 before. Will check it out. 

[Kim]

I think your choices are along the lines of:

- Become a proper web coder; accepting that takes a lot of time and effort and requires CPD and probably can only be edited by you

- Go for a CMS driven website, such as Wordpress or Concrete 5 or many others; accepting that you'll largely be tramlined into the themes available, customisation brings issues with updating, it has a significantly larger overhead on the server but can be edited by others

-Go for an application that designs websites; accepting that you'll be limited in styles and in order to update the website you'll need the source file and the application.

I'll add:

-Knock up a site in a vintage 1990s HTML3 style.  Either barebones academic-paper-style minimalism which nobody will care about because the content is actually up to date and important (this probably isn't wise if you're trying to market things), or some GeoShitties monstrosity full of broken tables, dangling links and badly-scaled images.  Animated "under construction" GIFs compulsory.


(One of the best decisions I accidentally made was losing track of how the Web works shortly after CSS was invented.)

[ian]

I confess I came into via SGML, the stern über-mistress of HTML and other lowly, worthless variants of the one true markup.

[citoyen]

I confess I came into via SGML, the stern über-mistress of HTML and other lowly, worthless variants of the one true markup.

I suppose the custom markup we used on the guidebooks was one of those lowly variants. Never came across SGML in my working life though.

[ian]

It was very strict. The many delights of doing layout and structured markup in Framemaker+SGML. Then Quark with an SGML plugin that only worked when you closed your eyes or left the building. Like most Quark plugins.

[Ham]

Somewhere, hidden in the darkest corner of the interwebs, is my old website lovingly hand crafted in HTML and optimised to load on a 1200/75 modem, including such trickery as stretching a one pixel wide image of solid colour to 100% to provide a line and custom palettes for images, although I did expect the browser to handle frames. I sneeze in the face of backward compatibility. Last updated in 1998.