HTML For People
October 11, 2024 2:16 AM   Subscribe

"I’m Blake Watson. I’ve been building websites since the early 2000s. Though I work professionally in the field, I feel strongly that anyone should be able to make a website with HTML if they want. This (free web) book will teach you how to do just that. It doesn’t require any previous experience making websites or coding. I will cover everything you need to know to get started in an approachable and friendly way. Ready? Let’s do it!"

Some resources mentioned on the site:
posted by JHarris (58 comments total) 143 users marked this as a favorite
 
That's ace! I stopped building websites at about the time that Blake Watson started. Back in those pre-Dreamweaver days it was empowering to make HTML do my bidding. Nowadays webpages are super swoopy and the code-to-text ratio is a million-to-one, so reg'lar people are intimidated from putting themselves Out There. I hope these links help someone shed the bloat and get back to basics.

I'm on blogspot/blogger and like the idea that people from the global south with limited bandwidth can read my s[h]ite . . . I hand-crank the HTML and tweak the pictures to minimize the pixel-count. Although blogger adds A Lot of bytes to the outgoing message: 1,000 words=6,000chars becomes 7,000words=90,00chars !!

CoderDoJo [MetaPrev], for all the pushback, was designed to turn kids from passive consumers of e-media into active creators. DIY-HTML is similar.
posted by BobTheScientist at 4:00 AM on October 11 [7 favorites]


Wow. I am in no position to judge the quality/efficacy of this but at first sight, I am daring to believe I can do this! I can dip my toes into the hitherto arcane and impenetrable mysteries of actually making the stuff I devour daily. I'm not exactly a Luddite but my world is one of books and handwriting and paper. And that is pretty much how I treat the web as patchy uneven reading material with a terrible waste to gem ratio. His assumptions about the level of prior knowledge are spot on. This might actually work. Thank you very much JHarris for linking this.
posted by dutchrick at 4:05 AM on October 11 [5 favorites]


Speaking as someone who is an expert on HTML and building websites...

(Well, OK, I was, 10 years ago)

This looks great. I wish it had been around when I taught my son some HTML.
posted by mmoncur at 4:18 AM on October 11 [5 favorites]


Wow JHarris this is really, really cool. Great find!

I always wanted to dive into coding and this seems much more accessible for me. What a great post to wake up to.
posted by glaucon at 5:21 AM on October 11 [1 favorite]


This is really awesome and genuinely inspiring me to make my own website, which I haven’t done in decades. A lot has changed since I first learned basic HTML in middle school in the 90s, but a lot is still the same.
posted by malthas at 5:22 AM on October 11 [1 favorite]


I proudly had the "Made In Notepad" 88x31 image on my webpages...25 years ago? Has it been that long?

For years I did things in Perl, then PHP and now for work in C# -- but where I've gotten to today is that Javascript and JQuery are pretty solid, browsers and computers are more powerful, so for little projects you don't need anything processing on the server side†, and if you need to show or parse rarely-changing data in some way, put it in JSON or XML in a text file, load it in the browser, handle it in a Javascript library -- and now I'm back to making websites in Notepad.

Well, Notepad++, I'm not an animal.

† until you need to store user input on the server, that is understandably restricted
posted by AzraelBrown at 6:04 AM on October 11 [5 favorites]


I've been making websites for 25 years and it is amazing that centering text has gotten harder, not easier.
posted by grumpybear69 at 6:28 AM on October 11 [17 favorites]


I’ve been at it since pre-netscape days, and your post gave me an easy way to reward butterick, which was overdue - Thanks OP.
posted by drowsy at 6:32 AM on October 11 [1 favorite]


I've been making websites for 25 years and it is amazing that centering text has gotten harder, not easier

Glad to hear I made the right life choices steering away from this madness.
posted by 3.2.3 at 6:36 AM on October 11 [8 favorites]


Wow. I am in no position to judge the quality/efficacy of this but

I've written a bestselling tech book, so I am in a position to judge it.

This is really good.

It's simple and informative, and you can't imagine how many books and tutorials I've seen that fail to do this. Or they have the "step two: draw the rest of the owl" problem. It's hard to get right, and easy to get wrong.

This book gets it right.
posted by AlSweigart at 6:49 AM on October 11 [28 favorites]


Looking forward to browsing this resource. Back in the mid 90s I taught myself to make websites, then to do back-end programming ... and boom! career change. But I haven't done a site from scratch in ages. So it will be interesting to see what today's beginner has to work with.

You'd think that any halfway decent document or desktop publishing program could also export an acceptable version as a web page, but then I recall what MS Word used to excrete when you exported to HTML.... -shudder-
posted by Artful Codger at 6:50 AM on October 11 [1 favorite]


and it is amazing that centering text has gotten harder, not easier.

*whispers in the quietest of voices*

The <center> tag still works in browsers, so you can just use that.
posted by AlSweigart at 6:51 AM on October 11 [8 favorites]


I'm not really a RETVRN guy, but this and the forums thread yesterday is getting me there.
posted by Reyturner at 7:02 AM on October 11 [1 favorite]


HTML For the People would be the best name an REM cover band coming out of Silicon Valley.
posted by Your Childhood Pet Rock at 7:18 AM on October 11 [11 favorites]


I think for centering vertically you have to build your own browser
posted by credulous at 7:28 AM on October 11 [11 favorites]


I think for centering vertically you have to build your own browsersimulation of the universe
posted by Mayor West at 7:39 AM on October 11 [7 favorites]


I looked at this at my first thought was "What's wrong with w3schools.com or the MDN Reference?" but then I realized there's probably at least 4 years of effort learning various development skills to be able to read those.
posted by Aardvark Cheeselog at 7:42 AM on October 11 [3 favorites]


I just turned my computer sideways and where did this universe come from?
posted by Reverend John at 7:42 AM on October 11


resources like this dovetail nicely with something Molly White (of Web3 is Going Just Great fame) talked about on her blog recently: Reclaiming Social Media in a Fragmented World. the more people who know how to create and publish content on their own, the healthier the web can be.
posted by Old Kentucky Shark at 7:44 AM on October 11 [7 favorites]


My first web page was hand-written on paper with a pencil. Then laboriously re-typed in a text editor on a public computer in a university computer lab, and uploaded via FTP. Who knows, if I dig around in my old crap I might even be able to find the floppy disk I saved it to. The current version of that site hasn't been substantively updated in something like 10-15 years but it's still online.

This site is great and it's one I will recommend to people who want to learn HTML. The places I learned it are mostly defunct now, or no longer approachable as they've gotten more complicated and less accessible to those new to the game. My coworkers ask me how I got good at building websites and all I can say is that even doing it casually, you learn a lot over 30 years.

Still use a text editor for my code. Not a frameworks guy, haven't ever needed the complexity. But it's nice to know I can slap together a functional web page and the skillset has come in handy multiple times. In my current federal job, my program has the best website of any similar program nationwide, because I was dogged enough to keep asking for a website, stubborn enough to fight through the 2 years of back-and-forth it took to gain approval, knowledgeable enough to build the site so that it looked good, and willing to listen to feedback enough to make it function for our program in ways that help our staff.
posted by caution live frogs at 7:45 AM on October 11 [10 favorites]


Also, I'm making a delicious apple pie from scratch.
posted by Reverend John at 7:50 AM on October 11 [5 favorites]


I built my first web page back in 1996, learning HTML out of a copy of HTML For Dummies: Quick Reference, and I've been writing it ever since. I deeply miss the day s when you could learn how something was done on a web page by just hitting "View Source" in a browser, but the age of JavaScript frameworks and in-browser rendering/computation has basically destroyed that. It's entirely possible to build a simple, static page today with pure HTML and CSS, have it be attractive, mobile-responsive, etc., but most web sites that people interact with are far beyond that.

The only real place for bare-bones HTML and CSS in a professional capacity is Email Marketing, which is what I do and have done for over a decade now. Recently, I decided to try and reconnect with that joy of building a web page from scratch and have been slowly building a classic 1990s Geocities style web site with modern code (that I haven't touched in several months, but I will get back to it. It feels/felt good to finally dip back into writing HTML for myself. I can see why teenage me was so enamored by it.
posted by SansPoint at 8:28 AM on October 11 [11 favorites]


This is an absolutely fantastic book.

AlSweigart gets it exactly right in saying that it's really hard to hit this sweet spot of simple and informative, providing enough information for real understanding without overwhelming newcomers.

Watson's explanations are clear and wonderfully encouraging.

I am so glad to know about this book, and Watson's writing. I'm looking forward to exploring it fully (I've been building websites for a living and as a hobby for decades, and you can see some of my sites in my profile and over in Projects, but I'm always delighted to be able to learn new things about something I know well when I read thoughtful introductions by excellent enthusiasts like Watson), and to learning more about Watson's projects.

Flagged as fantastic.

Thank you so much for this excellent post, JHarris!
posted by kristi at 8:43 AM on October 11 [3 favorites]


Also, I'm making a delicious apple pie from scratch.

Wow, HTML is much more versatile than I thought!
posted by Greg_Ace at 9:01 AM on October 11 [10 favorites]


"From scratch" where you're using "scratch" as a slang term for cash. Meaning, you buy the apple pie from someone else.
posted by rum-soaked space hobo at 9:19 AM on October 11 [5 favorites]


Haven't read any of the links yet but as one who writes my blog's HTML & CSS in a text editor, I agree!
posted by Rash at 9:22 AM on October 11 [1 favorite]


With the help of my computer scientist partner, I coded several websites with html as far back as 1994. But for the past year, I've had WordPress but have not succeeded in posting a website. Something about the WordPress universe just doesn't work for me.

I might try this. It would be fun to refresh my limited html knowledge and maybe I could actually get something posted!
posted by Well I never at 9:44 AM on October 11 [2 favorites]


Something about the WordPress universe just doesn't work for me.

Could it be the relentless upsell? All it takes is ONE feature slot that says "$$$ to unlock" and my mood turns foul. UIs should not be advertisements, EVER.

There was a time when I'd have found this site extremely useful, and it's my memory of that time that caused me to post it. The thing that really got me over the hump of learning HTML, really, was making Metafilter posts and comments. Our posing interface is archaic, it is true, but once you have the essential tags committed to muscle memory it's quite powerful.

I wanted to include a more comprehensive list of current-day free hosts, but I decided to focus on the main site. Maybe for later!
posted by JHarris at 10:42 AM on October 11 [7 favorites]


This looks fantastic.

I used to teach HTML and I loved how empowered the students seemed. Getting up from their chairs with a fist in the air the first time they figure out how to change the background colour of a page. And after class, they'd ask me earnestly whether I was a hacker.

I think it's really important to get people knowing how to make online stuff instead of just being a consumer. Even if it's rough and wobbly, it feels so amazing.
posted by Zumbador at 10:48 AM on October 11 [6 favorites]


Also, it is a wonder that even sites dating back to the first year of the internet still load and render well. If they used SSL they might not load if they didn't update their encryption, which added a point of brittleness, but plain http sites still work. CSS is generally a good thing, but it represented a move away from the plain and simple HTML, which was always intended for people to be able to write by hand, that the web was built on. Everything fancy, running server-side scripts, Javascript frameworks, what have you, is another bit o' brittleness. Those all-Java and all-Flash sites? DEAD. Even Homestar Runner still works only because of Ruffle. But plain ol' basic HTML sites all still work, and that's literally marvelous: something to marvel at.
posted by JHarris at 10:53 AM on October 11 [7 favorites]


Just in general I am astounded by the amount of available learning materials online. I’m ramping up on machine learning via YouTube, and tutorial pages. I also dove into university level courses on the brain and neurobiology. Free!
posted by St. Peepsburg at 10:55 AM on October 11 [3 favorites]


"From scratch" where you're using "scratch" as a slang term for cash. Meaning, you buy the apple pie from someone else.

"From scratch" where you're using "scratch" as a slang term for the Devil. Wouldst thou like the taste of apple pie?
posted by Strange Interlude at 11:08 AM on October 11 [5 favorites]


Aww hey thanks for this. This is very relevant to my interests as I realized that the last time I had updated my personal website FAQ was in 2004. I dug in and was able to make the changes (in the raw HTML) but wow would have been helpful to have some better tools. Thank you!
posted by jessamyn at 11:18 AM on October 11 [4 favorites]


Does it teach you how to make ADA-compliant websites? Accessibility was a huge issue back when most people were making websites by hand instead of using tools or professional web developers.
posted by Jacqueline at 11:27 AM on October 11 [4 favorites]


Just in general I am astounded by the amount of available learning materials online.

This is what I think any time someone naively says "we need to throw out the internet".
posted by Greg_Ace at 11:30 AM on October 11 [5 favorites]


As an artist who (in 2007) had to learn html and css to build our website to sell our books… I always appreciate good web tutorials. I began with HTML for Dummies and while I didn’t care for the insulting title, it did the trick. We gradually added downloadable tutorials and online classes (thank you Vibralogix.com) and my favorite tool has been Dreamweaver CS6. So much so that I haven’t upgraded the computer that’s running it. Now I’m trying to come up with a good replacement and so far I haven’t found one (it’s just so gol durn easy to highlight the section and then switch to code view to edit).

I recently went through the site and removed all the Google and Facebook code snippets that were supposed to facilitate my “page ranking”. I’m am sooooo thoroughly done with the SEO nonsense. At some point I should probably move to a CMS that would make it easier for our heirs to either shut down the site or try and continue when we shuffle off. Trying to keep up with all the new whiz bang, web 3.whatever gives me a headache. I’m always appreciative of simple, well-designed sites.

This tutorial (and the nice links accompanying it) looks to be a nice way to refresh my cob-webby skills. Thanks.
posted by jabo at 11:31 AM on October 11 [4 favorites]


Fantastic post!

I need to dig into this, especially as my very basic WordPress site is getting nuked this weekend for reasons and I may need to brush up my HTML skills while replacing it.

I'm going to investigate recommended editors a little more as a couple of things have popped out at me.

The current headline at the Visual Studio Code site reads, "Visual Studio Code with GitHub Copilot supercharges your code with AI-powered suggestions, right in your editor." I guess you can turn this off, but I am wary of AI anything, especially from Microsoft, as a selling point, and I uninstalled Copilot from my Win10 installation after my last Windows Update.

And Sublime Text is technically nagware, I guess, but if you download and evaluate it as designed, you may choose, as I did, to pay their license fee to keep using it. I like to pay individual software developers a few bucks to encourage them to keep building stuff. Note that their price is $99 as a permanent purchase. The software will keep on working forever after you make that single payment, like software used to work. Any new version of Sublime Text can be downloaded free for 3 years after your purchase. But after three years have passed, you are eligible for new versions only if you pay a renewal fee to cover another 3 years. I did this in 2022, and I will decide again in January 2025 if I will do it again. If I don't, I'll have perfectly usable software that I just updated today.
posted by maudlin at 11:33 AM on October 11 [3 favorites]


Some observations:
1) web pages coded in HTML/CSS only seem to be very secure indeed, whereas Wordpress installs and any type of extra code (like PHP) seem to be compromised fairly regularly.
2) CotEditor text editor is free on MacOS and it's great.
3) HTML should be considered a top-level rich text archive format. Let me explain…

Archiving rich text presents a problem: which format is good for long term storage? PDF is no good because some formatting (example: italics) is lost with copy and paste (PDF is an image format!). MS Word formats, and probably the LibreOffice .odt format as well, are here today, gone tomorrow. Word docx format is "open spec" but practically speaking proprietary due to its complexity. Note that opening old Word and Wordperfect and Wordstar format documents today presents a problem! Markdown was not created as a "save" format, but rather as a format to transform, and anyway reading plain text is hard on the eyes. RTF is just fine, but people view it as second class and not up to snuff for some reason.

But HTML/CSS stores rich text simply; stores images etc. in their original format external to the HTML file, which is a plus; should always be able to be read by something (the internet browser won't disappear anytime soon); and is in any case easily decode-able. You might say, HTML has no concept of a "page!" RTF does not either, it just flows text into page containers of a specified size. There is always the question of "see page 128, where this character says…, " and I'm not sure how to reference a particular line when text is re-flowable. But in any case one can see HTML being used as an archive format in practice at gutenberg.org for example.
posted by jabah at 2:27 PM on October 11 [2 favorites]


jabah: There is always the question of "see page 128, where this character says…

HTML has a solution for this and has for decades! It uses the same tag you do to make a link, too. Simply wrap some of the text you want to be able to jump to with an anchor tag that has an id attribute 
<a id="reference">Lorem ipsum dolor sit amet...</a>
Then you can create a link to jump to or back to that anchor with another anchor tag! 
<a href="#reference">See previously</a>
Easy-peasy-lemon-squeezy.
posted by SansPoint at 3:10 PM on October 11 [5 favorites]


Jaqueline, I cannot say for sure, but it is my (possibly deficient) understanding that plain HTML is nearly maximally accessible, since the text that needs to be read is right there in the clear, not obscured by frameworks or post load rendering. Everything a screen reader needs to speak or otherwise express should be easy to find.
posted by JHarris at 3:51 PM on October 11 [3 favorites]


Also, I'm making a delicious apple pie from scratch.

Wow, HTML is much more versatile than I thought!

To make an apple pie, or a website, from scratch, you must first create the universe.
posted by Reyturner at 4:00 PM on October 11 [2 favorites]


"Let there be Helvetica Light"?
posted by Greg_Ace at 4:24 PM on October 11 [3 favorites]


JHarris: Well, you're mostly right. Plain HTML is fairly accessible by default, provided you're structuring your HTML documents correctly: paragraph and heading tags, list tags, and such, at the bare minimum. However, back in the day when people were using table-based layouts and even professional webmasters overlooked tags and attributes that were baked in like address running a page through a screen reader could get hairy. Even in 2024 well-structured HTML pages, dynamic or otherwise, are still annoyingly rare.
posted by SansPoint at 4:42 PM on October 11 [5 favorites]


PDF is an image format!

No, it's not. PDF is a lot more complicated than an image format. It's ultimately based in PostScript, which is Turing-complete. The problem of formatting being lost when you copy/paste from a PDF is pretty easy to mitigate if people have marked up their PDFs correctly, and in any case has to do with the way copy/paste is handled at an OS level.
posted by adrienneleigh at 4:47 PM on October 11 [5 favorites]


(There are a lot of issues with using PDFs for archival! But PDF is a container, not an image!)
posted by adrienneleigh at 4:48 PM on October 11 [2 favorites]


Ah, still have my ancient late 20th century home website on Angelfire/Lycos with a basic screen, but I forgot the password long ago. If I didn't, I'd go back and dick around with HTML some more! Now I regret not uploading those spinning mandalas that I made in an Adobe Illustrator workshop.
posted by ovvl at 5:03 PM on October 11 [1 favorite]


see page 128, where this character says…

Years ago when I was Distributed Proofreading for Project Gutenberg there was a very lively discussion about when to propagate page references and also how. It started with editions of Ancient Greek texts, and if I’m remembering right everyone agreed that the ?scroll line? numbers should be preserved, but there were two more layers of scholarly apparatus we were quibbling over.
posted by clew at 5:25 PM on October 11 [3 favorites]


"Let there be Helvetica Light"?

Or perhaps you're referring to the Big <strong>!</strong>
posted by Greg_Ace at 5:39 PM on October 11 [1 favorite]


>and anyway reading plain text is hard on the eyes.

jabah, I'm not sure I see your point here. How are HTML and Markdown different in this sense? HTML is also plain text, which is why you can create a web page in Notepad. I don't understand how the raw form of written HTML (not interpreted HTML) is any sort of rich text. Even uninterpreted RTF is plain text, not binary, though far more difficult to parse than either HTML or Markdown. The whole idea of Markdown is that it's an easily written way of creating HTML, and remains easily read as well, and this is what archiving is all about: preserving content in a format that will be easily readable sometime in the future.
posted by lhauser at 5:41 PM on October 11 [3 favorites]


But PDF is a container, not an image

What I expressed badly was that in everyday experience most PDFs are produced with File > Print, with no consideration of semantic tagging and with just enough information to print nicely. I was wrong about italics not copy-pasting; this is true only of PDFs downloaded from Ao3, apparently!
posted by jabah at 5:52 PM on October 11 [2 favorites]


How are HTML and Markdown different in this sense?

Recently, I was editing a README.txt in basic markdown, and I realized my eyes just couldn't take it anymore. Everything looked the same and I couldn't navigate the document easily. I converted it to rich text and exported it to html and now it's officially README.html and the info is so much easier to digest. In other words, people view HTML in a browser, but often, for software documentation anyway, read markdown as markdown.
posted by jabah at 6:00 PM on October 11


In 1996-97, I was the first online editor for a college publication (whose subdomain no longer works, sadly.) I don't think "Inspect Element" was a thing back then, so I was viewing source on other webpages and searching the (hyper)text for whatever I was trying to emulate. A tool like this would have come in handy.
posted by emelenjr at 8:07 PM on October 11


Back in the good old days your web browser came bundled with a html editor.
Back when the internet was for people and not megacorps.
posted by neonamber at 10:43 PM on October 11 [5 favorites]


Stumbled upon Static Site Generators - working my way through the list for something simple like Rael Dornfests Blosxom, but a little more modern. Most seem to require a bit more effort to get going than I want to invest, but I'll keep trawling through them for something that'll render a static blog without a ton of pre-reqs or web-dev skills (I just want to parse a folder structure and render pages from plain text or markdown that fit into a simple template... a calendar of post entries, a little breadcrumb trail and some rss would be nice too...). Maybe I should just go back to Blosxom...
posted by phigmov at 1:18 AM on October 12 [4 favorites]


Mod note: [oooh, nice! We've added this great post to the sidebar and Best Of blog!]
posted by taz (staff) at 2:18 AM on October 12 [3 favorites]


>I converted it to rich text and exported it to html

OK, I get the issue you're having (I can't say I've ever shared it, but that's just me). But what is the process of converting the markdown to rich text and exporting to html? What are the tools you use to do this, and why take two steps instead of running the markdown text through Pandoc or a dingus somewhere and converting it directly to html, which is what Markdown is designed for?
posted by lhauser at 8:08 AM on October 12


This thread the other day gave me some ideas for post-Blosxom, post-WordPress site building, including blot. My Blosxom site finally stopped rendering properly for some reason after many years, some server-side change, no doubt. So this is all potentially useful!
posted by limeonaire at 10:10 AM on October 12 [2 favorites]


Here's a page of resources for web creators.
posted by JHarris at 11:05 AM on October 12


« Older The harms extend beyond the dumps themselves   |   Native species reclaiming their desert homeland Newer »


You are not currently logged in. Log in or create a new account to post comments.



Tags

Share