From 8eefb02eddbafb196ce664ec051c2d014f53e0b8 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 8 Feb 2024 10:46:38 -0500 Subject: Remove stylesheet, update all pages to be valid XHTML --- everyone-should-become-an-html-expert.html | 64 +++++++++++++++--------------- index.html | 30 ++++++++------ members.html | 34 +++++++++------- style.css | 3 -- 4 files changed, 70 insertions(+), 61 deletions(-) delete mode 100644 style.css diff --git a/everyone-should-become-an-html-expert.html b/everyone-should-become-an-html-expert.html index 8882e3b..c9121e2 100644 --- a/everyone-should-become-an-html-expert.html +++ b/everyone-should-become-an-html-expert.html @@ -1,25 +1,24 @@ - + + + - - + + XHTML Club - Everyone Should Become HTML Experts - - +

Everyone should become an HTML expert

Posted on April 6th, 2021

No matter your profession or level of technical skill - you should master the HTML programming¹ language. It's used everywhere on the internet and is very simple to grasp. Since HTML uses logical standards for rendering content it becomes fairly simple to pickup and learn. More on that later.

Why should you bother to learn HTML?

Easy to pickup and easy to master
Better understanding of website structure
Ability to attain your own web freedom

- -

1. Easy to pickup and easy to master

HTML is not a difficult language to understand. I also believe it is fairly easy to master, since the core concepts and structure of HTML is so intuitive. Let's look at a made-up example and you'll see what I mean.

Let's pretend that you want to display a page on the big world wide web showcasing your skills at baking cupcakes. Similar to creating a text or Word document on your computer using an application, you probably have a general idea of how the content should be displayed:

@@ -31,18 +30,18 @@

Seems simple enough, right? That's because it is. We can now start to work our way through these items one piece at a time.

Recipe title

Since this is the heading of our document (or web page in this context) we will use the HTML heading tag(s):

- <h1>My Amazing Cupcakes</h1> -

Remember how I mentioned HTML being fairly intuitive? Using h1 tags, you're telling the browser to render the content within this tag as a number 1 level heading → h-1. If you instead wanted to render your headings at smaller sizes (or give them less importance in the document) you can cycle through all available heading tags 2 through 6. Feel free to learn more about HTML heading elements.

Since this is the heading of our document (or web page in this context) we will use the HTML heading tag(s):

<h1>My Amazing Cupcakes</h1>

Ingredients

A document item like a set of ingredients would normally best be rendered out into a list. HTML has us covered with that as well:

<ul>
-  <li>Some sugar</li>
-  <li>Some flour</li>
-  <li>Some butter</li>
-  <li>Chocolate</li>
-  <li>Frosting</li>
-</ul>

<ul>
+    <li>Some sugar</li>
+    <li>Some flour</li>
+    <li>Some butter</li>
+    <li>Chocolate</li>
+    <li>Frosting</li>
+</ul>

Which would render like this in the browser:

Some sugar
Chocolate
Frosting

The ul tag stands for unordered list and the li elements inside reference list items. Starting to see a simple pattern here? If you wanted to set your list to display as a set of ordered items, just set the parent tag as ol instead of ul. I bet you probably already figured that out though ;) Feel free to learn more about unordered and ordered list items.

Details (Instructions)

Now, you could set the recipe details/instructions to be set as another list element, but for this example we are going to render them as paragraph elements:

<p>Mix all the ingredients together however you think is best. These cupcakes aren't a real recipe anyway!</p>
-<p>Make sure you don't burn the cupcakes. That would suck.</p>

<p>Mix all the ingredients together however you think is best. These cupcakes aren't a real recipe anyway!</p>
+<p>Make sure you don't burn the cupcakes. That would suck.</p>

I know- you're probably shocked that HTML renders p tags as paragraphs.

Picture (optional)

The content above would be more than enough for users to read our document and understand how to bake our delicious cupcakes. But a picture is worth a thousand words:

<img src="path/to/your/cupcakes/image" alt="Delicious chocolate cupcakes">

<img src="path/to/your/cupcakes/image" alt="Delicious chocolate cupcakes">

Yet more intuitive greatness from the HTML gods! An image is represented within an img tag. You use the src (source) attribute to point the browser to the image's location. The alt (alternate text) is a helpful snippet of text that describes what the picture contains (required for those with disabilities or accessibility issues).

That's it!

2. Better understanding of website structure

By becoming fluent in HTML, you gain a much better understanding on how all websites across the web are constructed. Though a greater understanding of HTML has many benefits, I find having the ability to troubleshoot bugs or issues through a browser's devtools to be the most beneficial.

No matter your current job or future career path, being able to mention your expertise of HTML can only be seen as an added bonus to your skill-set. Do not underestimate the power to build website skeletons!

3. Ability to attain your own web freedom

The other benefits of learning HTML posted above are great - but I believe the best reason to become an HTML master is the web freedom associated with it. You gain the ability to create, edit and share your own website without the help of any 3rd party builders or locked-in content management systems. Instead, your workflow might be something like:

Save file as `index.html`
Upload to your web host

And with free hosting services such as Netlify or DigitalOcean it's not like you'll be breaking the bank to have that website live on the interwebs! (You could go down the rabbit-hole of increasing your web freedom by self hosting your content etc - but I'll save that for another day)

Wrapping up

There can only be positives to gain from jumping into HTML and eventually mastering the language. It's the core skeleton implemented across the web (no matter how complex the framework used to get there might be) and isn't going away anytime soon. Some might advocate for becoming fluent in Markdown or a similar formatted text language but I would strongly advocate for the real deal: HTML.

-
-

1. This is a common debate - but for simplicity sake I'm just calling it this.

- +

This website is hand-coded with valid XHTML and hosted with NearlyFreeSpeech. Reach out on Mastodon

+ + + +

+ \ No newline at end of file diff --git a/index.html b/index.html index 92ef860..15de674 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,22 @@ - + + + - - + + XHTML Club - Extreme HyperText Movement for Luddites - - +

XHTML Club

Extreme HyperText Movement for Luddites

- -

Greetings, this is the official XHTML club (and blog)! This website is both a collection of HTML-focused websites and a simple blog; a lonely web designer screaming out into the abyss of the internet. Ranting and raving about the ever increasing bloat that is the "modern" web.

+ +

Greetings, this is the official XHTML club (and blog)! This website is both a collection of HTML-focused websites and a simple blog; a lonely web designer screaming out into the abyss of the internet. Ranting and raving about the ever increasing bloat that is the "modern" web.

The Purpose of XHTML

I feel as though I get more and more extreme in my efforts to combat excessive web bloat across the internet. It started off with the creation of the 1MB Club project but has since expanded further - as you might have noticed.

This isn't due to a hatred towards CSS and JavaScript, but instead a hatred towards how horrible they are being used on the web today. What was once used for flourish or improving a user's experience is now used to directly attack and harm that user. I do not wish to be a part of that growing problem.

@@ -28,12 +29,17 @@

WIP / Why you need a personal website (and how to make one)

2021-04-06 / Everyone should become an HTML expert

- +

This website is hand-coded with valid XHTML and hosted with NearlyFreeSpeech. Reach out on Mastodon

+ + + +

+ \ No newline at end of file diff --git a/members.html b/members.html index 7dc1195..e2423b9 100644 --- a/members.html +++ b/members.html @@ -1,25 +1,26 @@ - + + + - - + + XHTML Club - Member List - - +

XHTML Club

Extreme HyperText Movement for Luddites

- +

XHTML Members:

How to submit: +

How to submit:

Just shoot me an email with "[XHTML Club] submitted URL" as the subject line.
(Multiple website submissions can just be included within the email body.)

Feel free to toss a small donation my way if you feel like it was worth it
(This is entirely optional - only do so if you're feeling generous!)
Just shoot me an email with "[XHTML Club] submitted URL" as the subject line.
(Multiple website submissions can just be included within the email body.)
Feel free to toss a small donation my way if you feel like it was worth it
(This is entirely optional - only do so if you're feeling generous!)

Current websites that are fairly close to being pure HTML (the rules are a little loose here):

robertblinov.net
storin.nl

- +

This website is hand-coded with valid XHTML and hosted with NearlyFreeSpeech. Reach out on Mastodon

+ + + +

+ diff --git a/style.css b/style.css deleted file mode 100644 index db5e99f..0000000 --- a/style.css +++ /dev/null @@ -1,3 +0,0 @@ -*{box-sizing: border-box;} -img{max-width:100%;} -pre{overflow:auto;} -- cgit v1.2.3-54-g00ecf