diff options
| author | Bradley Taunt <bt@btxx.org> | 2024-02-08 10:46:38 -0500 |
|---|---|---|
| committer | Bradley Taunt <bt@btxx.org> | 2024-02-08 10:46:38 -0500 |
| commit | 8eefb02eddbafb196ce664ec051c2d014f53e0b8 (patch) | |
| tree | 1678afcfa8883dd0ff03094cf959cbf276bcf970 | |
| parent | c0d7f4e93de3a77c3a12b89c43f4acfc4bf3a621 (diff) | |
Remove stylesheet, update all pages to be valid XHTML
| -rw-r--r-- | everyone-should-become-an-html-expert.html | 64 | ||||
| -rw-r--r-- | index.html | 30 | ||||
| -rw-r--r-- | members.html | 34 | ||||
| -rw-r--r-- | style.css | 3 |
4 files changed, 70 insertions, 61 deletions
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 @@ -<html lang="en"> +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML Club - Everyone Should Become HTML Experts</title> - <link rel="shortcut icon" href="/favicon.png"> - <link rel="stylesheet" href="style.css"> + <link rel="shortcut icon" href="/favicon.png"/> </head> <body> <p><a href="/">← back to XHTML Club homepage</a></p> - <hr> + <hr/> <h1>Everyone should become an HTML expert</h1> <p><small>Posted on April 6th, 2021</small></p> - <p>No matter your profession or level of technical skill - you should master the HTML programming<sup><a href="#1">1</a></sup> 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.</p> + <p>No matter your profession or level of technical skill - you should master the HTML programming<sup><a href="#ft1">1</a></sup> 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.</p> <h3>Why should you bother to learn HTML?</h3> <ol> <li><a href="#easy">Easy to pickup and easy to master</a></li> <li><a href="#understanding">Better understanding of website structure</a></li> <li><a href="#freedom">Ability to attain your own web freedom</a></li> </ol> - - <br> <h2 id="easy">1. Easy to pickup and easy to master</h2> <p>HTML is not a difficult language to understand. I also believe it is fairly easy to <em>master</em>, 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.</p> <p>Let's pretend that you want to display a page on the big <em>world wide web</em> 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:</p> @@ -31,18 +30,18 @@ </ol> <p>Seems simple enough, right? That's because <em>it is</em>. We can now start to work our way through these items one piece at a time.</p> <h3>Recipe title</h3> - <p>Since this is the <u>heading</u> of our document (or web page in this context) we will use the HTML heading tag(s):</p> - <code><h1>My Amazing Cupcakes</h1></code> - <p>Remember how I mentioned HTML being fairly intuitive? Using <code>h1</code> tags, you're telling the browser to render the content within this tag as a <strong>number 1 level heading</strong> → 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 <code>2</code> through <code>6</code>. Feel free to <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements">learn more about HTML heading elements</a>.</p> + <p>Since this is the <b>heading</b> of our document (or web page in this context) we will use the HTML heading tag(s):</p> +<pre><h1>My Amazing Cupcakes</h1></pre> + <p>Remember how I mentioned HTML being fairly intuitive? Using <code>h1</code> tags, you're telling the browser to render the content within this tag as a <strong>number 1 level heading</strong> → 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 <code>2</code> through <code>6</code>. Feel free to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements">learn more about HTML heading elements</a>.</p> <h3>Ingredients</h3> <p>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:</p> -<pre><code><ul> - <li>Some sugar</li> - <li>Some flour</li> - <li>Some butter</li> - <li>Chocolate</li> - <li>Frosting</li> -</ul></code></pre> + <pre><ul> + <li>Some sugar</li> + <li>Some flour</li> + <li>Some butter</li> + <li>Chocolate</li> + <li>Frosting</li> +</ul></pre> <p>Which would render like this in the browser:</p> <ul> <li>Some sugar</li> @@ -51,24 +50,22 @@ <li>Chocolate</li> <li>Frosting</li> </ul> - <p>The <code>ul</code> tag stands for <em>unordered list</em> and the <code>li</code> elements inside reference <em>list items</em>. Starting to see a simple pattern here? If you wanted to set your list to display as a set of <em>ordered</em> items, just set the parent tag as <code>ol</code> instead of <code>ul</code>. I bet you probably already figured that out though ;) Feel free to learn more about <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul">unordered</a> and <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol">ordered</a> list items.</p> + <p>The <code>ul</code> tag stands for <em>unordered list</em> and the <code>li</code> elements inside reference <em>list items</em>. Starting to see a simple pattern here? If you wanted to set your list to display as a set of <em>ordered</em> items, just set the parent tag as <code>ol</code> instead of <code>ul</code>. I bet you probably already figured that out though ;) Feel free to learn more about <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul">unordered</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol">ordered</a> list items.</p> <h3>Details (Instructions)</h3> <p>Now, you could set the recipe details/instructions to be set as another <code>list</code> element, but for this example we are going to render them as paragraph elements:</p> -<pre><code><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></code></pre> +<pre><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></pre> <p>I know- you're probably shocked that HTML renders <code>p</code> tags as <em>paragraphs</em>.</p> <h3>Picture (optional)</h3> <p>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:</p> -<pre><code><img src="path/to/your/cupcakes/image" alt="Delicious chocolate cupcakes"></code></pre> +<pre><img src="path/to/your/cupcakes/image" alt="Delicious chocolate cupcakes"></pre> <p>Yet more intuitive greatness from the HTML gods! An image is represented within an <code>img</code> tag. You use the <code>src</code> (source) attribute to point the browser to the image's location. The <code>alt</code> (alternate text) is a helpful snippet of text that describes what the picture contains (required for those with disabilities or accessibility issues).</p> <p>That's it!</p> - <br> <h2 id="understanding">2. Better understanding of website structure</h2> <p>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 <code>devtools</code> to be the most beneficial.</p> <p>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!</p> - <br> <h2 id="freedom">3. Ability to attain your own web freedom</h2> <p>The other benefits of learning HTML posted above are great - but I believe the best reason to become an HTML master is the <em>web freedom</em> 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:</p> <ol> @@ -77,20 +74,23 @@ <li>Save file as `index.html`</li> <li>Upload to your web host</li> </ol> - <p>And with free hosting services such as <a target="_blank" href="https://netlify.com">Netlify</a> or <a target="_blank" href="https://m.do.co/c/74b3fd11c07a">DigitalOcean</a> 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)</p> + <p>And with free hosting services such as <a href="https://netlify.com">Netlify</a> or <a href="https://m.do.co/c/74b3fd11c07a">DigitalOcean</a> 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)</p> - <br> <h2>Wrapping up</h2> <p>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.</p> - <br> - <p id="1"><small>1. This is a common debate - but for simplicity sake I'm just calling it this.</small></p> - <footer> + <p id="ft1"><small>1. This is a common debate - but for simplicity sake I'm just calling it this.</small></p> + <div id="footer"> <h3>Support XHTML</h3> <p>All content posted on this website will always remain free to everyone. No pay-walls, obtrusive ads or annoying tracking cookies. Basically zero bullshit or fluff. If you feel like you would like to support my efforts in continuously posting free (<em>and hopefully interesting</em>) content, then please consider <a href="https://btxx.org/pizza">donating</a>.</p> <h3>Colophon</h3> - <p>This website is hand-coded with vanilla HTML and hosted with <a href="https://nearlyfreespeech.net">NearlyFreeSpeech</a>. Reach out on <a rel="me" href="https://mastodon.bsd.cafe/@bt">Mastodon</a></p> - </footer> + <p>This website is hand-coded with valid XHTML and hosted with <a href="https://nearlyfreespeech.net">NearlyFreeSpeech</a>. Reach out on <a rel="me" href="https://mastodon.bsd.cafe/@bt">Mastodon</a></p> + <p> + <a href="https://validator.w3.org/check?uri=https%3A%2F%2Fxhtml.club%2Feveryone-should-become-an-html-expert.html"> + <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /> + </a> + </p> + </div> </body> </html>
\ No newline at end of file @@ -1,21 +1,22 @@ -<html lang="en"> +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML Club - Extreme HyperText Movement for Luddites</title> - <link rel="shortcut icon" href="/favicon.png"> - <link rel="stylesheet" href="style.css"> + <link rel="shortcut icon" href="/favicon.png"/> </head> <body> <h1>XHTML Club</h1> - <h2>E<u>x</u>treme <u>H</u>yper<u>T</u>ext <u>M</u>ovement for <u>L</u>uddites</h2> - <nav> + <h2 style="font-weight:normal;">E<b>x</b>treme <b>H</b>yper<b>T</b>ext <b>M</b>ovement for <b>L</b>uddites</h2> + <div id="nav"> <ul> <li><a href="/"><b>Home</b></a></li> <li><a href="./members.html">Members</a></li> </ul> - </nav> - <p>Greetings, this is the official <u title="Extreme HyperText Movement for Luddites">XHTML</u> club (and blog)! This website is both a collection of HTML-focused websites and a simple blog; a <a href="https://btxx.org">lonely web designer</a> screaming out into the abyss of the internet. Ranting and raving about the ever increasing bloat that is the "modern" web.</p> + </div> + <p>Greetings, this is the official <b title="Extreme HyperText Movement for Luddites">XHTML</b> club (and blog)! This website is both a collection of HTML-focused websites and a simple blog; a <a href="https://btxx.org">lonely web designer</a> screaming out into the abyss of the internet. Ranting and raving about the ever increasing bloat that is the "modern" web.</p> <h2>The Purpose of XHTML</h2> <p>I feel as though I get more and more extreme in my efforts to combat <em>excessive web bloat</em> across the internet. It started off with the creation of the <a href="https://1mb.club">1MB Club project</a> but has since expanded further - as you might have noticed.</p> <p>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.</p> @@ -28,12 +29,17 @@ <li>WIP / Why you need a personal website (and how to make one)</li> <li>2021-04-06 / <a href="everyone-should-become-an-html-expert.html">Everyone should become an HTML expert</a></li> </ul> - <footer> + <div id="footer"> <h3>Support XHTML</h3> <p>All content posted on this website will always remain free to everyone. No pay-walls, obtrusive ads or annoying tracking cookies. Basically zero bullshit or fluff. If you feel like you would like to support my efforts in continuously posting free (<em>and hopefully interesting</em>) content, then please consider <a href="https://btxx.org/pizza">donating</a>.</p> <h3>Colophon</h3> - <p>This website is hand-coded with vanilla HTML and hosted with <a href="https://nearlyfreespeech.net">NearlyFreeSpeech</a>. Reach out on <a rel="me" href="https://mastodon.bsd.cafe/@bt">Mastodon</a></p> - </footer> + <p>This website is hand-coded with valid XHTML and hosted with <a href="https://nearlyfreespeech.net">NearlyFreeSpeech</a>. Reach out on <a rel="me" href="https://mastodon.bsd.cafe/@bt">Mastodon</a></p> + <p> + <a href="https://validator.w3.org/check?uri=https%3A%2F%2Fxhtml.club%2F"> + <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /> + </a> + </p> + </div> </body> </html>
\ 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 @@ -<html lang="en"> +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML Club - Member List</title> - <link rel="shortcut icon" href="/favicon.png"> - <link rel="stylesheet" href="style.css"> + <link rel="shortcut icon" href="/favicon.png"/> </head> <body> <h1>XHTML Club</h1> - <h2>E<u>x</u>treme <u>H</u>yper<u>T</u>ext <u>M</u>ovement for <u>L</u>uddites</h2> - <nav> + <h2 style="font-weight:normal;">E<b>x</b>treme <b>H</b>yper<b>T</b>ext <b>M</b>ovement for <b>L</b>uddites</h2> + <div id="nav"> <ul> <li><a href="/"><b>Home</b></a></li> <li><a href="./members.html">Members</a></li> </ul> - </nav> + </div> <h2>XHTML Members:</h2> - <p><strong>How to submit:</strong> + <p><strong>How to submit:</strong></p> <ol> - <li>Just <a href="mailto:xhtml-club@patches.btxx.org">shoot me an email</a> with "[XHTML Club] submitted URL" as the subject line.<br> (<small>Multiple website submissions can just be included within the email body.</small>)</li><br> - <li>Feel free to toss a small <a href="https://btxx.org/pizza">donation</a> my way if you feel like it was worth it <br> (<small>This is entirely optional - only do so if you're feeling generous!</small>)</li> + <li>Just <a href="mailto:xhtml-club@patches.btxx.org">shoot me an email</a> with "[XHTML Club] submitted URL" as the subject line.<br/> (<small>Multiple website submissions can just be included within the email body.</small>)</li> + <li>Feel free to toss a small <a href="https://btxx.org/pizza">donation</a> my way if you feel like it was worth it <br/> (<small>This is entirely optional - only do so if you're feeling generous!</small>)</li> </ol> <p>Current websites that are <em>fairly</em> close to being pure HTML (the rules are a little loose here):</p> <ul> @@ -75,12 +76,17 @@ <li><a href="https://robertblinov.net/">robertblinov.net</a></li> <li><a href="https://storin.nl/">storin.nl</a></li> </ul> - <footer> + <div id="footer"> <h3>Support XHTML</h3> <p>All content posted on this website will always remain free to everyone. No pay-walls, obtrusive ads or annoying tracking cookies. Basically zero bullshit or fluff. If you feel like you would like to support my efforts in continuously posting free (<em>and hopefully interesting</em>) content, then please consider <a href="https://btxx.org/pizza">donating</a>.</p> <h3>Colophon</h3> - <p>This website is hand-coded with vanilla HTML and hosted with <a href="https://nearlyfreespeech.net">NearlyFreeSpeech</a>. Reach out on <a rel="me" href="https://mastodon.bsd.cafe/@bt">Mastodon</a></p> - </footer> + <p>This website is hand-coded with valid XHTML and hosted with <a href="https://nearlyfreespeech.net">NearlyFreeSpeech</a>. Reach out on <a rel="me" href="https://mastodon.bsd.cafe/@bt">Mastodon</a></p> + <p> + <a href="https://validator.w3.org/check?uri=https%3A%2F%2Fxhtml.club%2Fmembers.html"> + <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /> + </a> + </p> + </div> </body> </html> 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;} |