Learning HTML

After multiple unsuccessful attempts at grokking HTML, I finally took Dave Gray’s Learn HTML tutorial for beginners It’s about 4 hours long, and gives a very good overview and a project to complete to understand the basics of HTML.

I’ve spent about 10 hours in total on this whole thing: making notes, doing the project at the end, and then looking through the areas that caused me trouble a few times. Well worth the effort, methinks – not least because I at least understand why I could not get those ioslide templates to work for me 😺

Hyper Text Markup Language

The Standard markup language for documents designed to be displayed in a web browser. Assisted by Cascading Style Sheets and scripting languages like JavaScript

Installation of tools

  • VS Code as code editor
  • Plugins: Live Server, Prettier, vscode-icons, github (dark) theme
  • Some Chrome extensions (I didn’t use this)
  • My own GIthub & Git configuration
  • HTML validation service from W3C.

Text Basics

  • index.html is always the first page to build.
  • ⚠ Every <element> that shows up needs a corresponding </element> close-tag element
  • Anatomy of a <html> document
    • <head>
      • <title> Title shows up on the browser tab
      • <meta>
        • name="author"
        • name="description" a longer description
      • <link rel="icon" href="html5.png" > relate to an icon, with a hypertext reference to a file or resource.
      • <link rel="stylesheet" href="css/stylesheet.css" > relate to an icon, with a hypertext reference to a file or resource.
    • <body>
      • <header>
      • <main>
      • <footer>
  • Keyboard shortcuts will save so much time in navigating around text in the code editor
  • Elements
    • Block Level elements
      • Each html page should have only one <h1> element
      • There can be more than one <h2> on a page, and each <h2> can have more than one <h3> element. Headers have semantic importance
      • <hr> is a horizontal rule with some semantic meaning attached to it
      • <br> is a line break
      • <p> paragraph
      • <nav> navigation area
        • attribute <aria-label=""> I don’t know what this does tbh
      • <section>
      • <article>
      • <img>
      • <figure> a better way of doing images
        • <img> as above
        • <figcaption> includes a caption under the image
        • gives a bit of padding / indentation to this section
      • <aside> renders as a toggle button, and requires some more details. A semantic element
        • <details> A headline question, for example
        • <summary> A bit more detail (this messes with my head)
      • <time datetime="08:00">8 am</time>
      • <time datetime="PT3H">3 hours</time>
      • <mark> highlights the text
    • inline elements
      • <em> italics
      • <strong> bold
      • <a href="">hyperlink to somewhere</a> anchor tag, hyperlinking to other html documents
      • <abbr title="Tooltip> allows some expansion of an abbreviation using the tooltip, but isn’t an accessible to all assisted technologies.
      • <address> allows semantic meaning to the text
    • HTML entities
      • &nbsp; whitespace
      • &copy; copyright symbol
      • &lt; less than
      • &gt; greater than

<!-- Comment --> won’t show up on the page but can show up in the “Inspect” view on a browser.

Lists

<li> creates a list item inside one of the following tags:

  • <ul> Unordered lists, shows up as bullet lists
  • <ol> Ordered lists, show up as numbered
  • <dl> Description lists, like a table but not as pretty. NOTE: Doesn’t need a <li> item
    • <dt> Description term
    • <dd> Description detail

Adding Links

  • not the same as the <link> tag seen in the <head> part of the <html> document.
  • <a href=""></a> is an anchor tag.
  • Links can be of three types:
    • Absolute reference: <a href="https://google.com">Open a Google Search</a> links to Google with the words “Open a Google Search” showing up with an underline.
    • Relative reference: <a href="main.css"></a> links to the file named main.css in the same folder as the document.
    • Internal reference: directly to the <section> in the document, identified with a id="specific_name attribute. Then refer to the document as <a href="#specific_name>
  • This tag can link to any other html document, whether in the same folder, or on the Internet. You can also link to a specific place in the same html document, and uses some special characters to identify the location.
  • <a href="#">Back to top</a> takes you to the top of the existing page
  • <a href="/">Home</a> takes you to the index.html document
  • Special attributes in anchor tags:
    • <a href="favicon.png" download>HTML favicon</a> to download the file
    • <a href="mailto:random@randommail.com">my email ID</a> to start an email
    • <a href="tel:+19845022345">Call Us</a> works best on a mobile
    • the attribute target="_blank" opens the link in a new tab

Some linking rules:

  1. Avoid the whole link itself
  2. Avoid “Links to” phrase
  3. Keep link text short
  4. No links that say “click here” 😨


lorem*3 can give you three paragraphs of lorem ipsum placeholder

Adding Images

  • Save images in a separate folder, usually titled img
  • Block level element to include image:
<img src="img/file_name.jpg" 
	alt="a descriptive file, allows accesible tools"
	title="shows up on hover"
	width="400, width of the image"
	height="200, height of the image"
	loading="lazy, improves page load performance">

Providing width & height to deal with [cumulative layout shift](https://web.dev/articles/cls)

`figure` allows non-image content too:
```html
<figure>
<p>
<code>&lt;h1&gt;Hello World!&lt;/h1;&gt;</code>
</p>
</figure>

will render as

	<h1>Hello World</h1>

Resources for images

Semantic Tags

  • These elements give additional meaning rather than just a separator
  • Very useful for assistive technology
  • Allows quick scan of the content on the page
  • <hr> as a separator of topics
  • See Anatomy of a html – Header, Main, Footer within the <main> section of the page as a ‘collection’
  • <section> can be called <article> with a specific unique id attribute to identify it. The difference between these two is not entirely clear: a thumb rule might be to consider an article as a self-containing blob of text, while <section> is merely carving off a small part of the document.
  • <aside>, <time> are examples of semantic tags. See

[!Caution]+
Avoid <div> and <span>; instead use semantic elements

Handy Tool: Chrome extension called HTML5 Outliner to see how the document shows up for assistive technologies. Remember that not everyone uses a mouse to browse the internet.

Tables

This caused me some trouble. I don’t understand this whole syntax just yet.

    • Structured tabular data, don’t ever use this for the whole html document!
    • They need a little css to make them reasonably legible 😺
    • Use semantics extensively here to make sense!
    • Elements to work with:
      • Table
        • <table>: defines the table
        • <caption>: creates a centred caption for the table
        • <tr>: create a row to hold the data
          • Use attribute colspan="n"to define how the text flows between columns
          • Use attribute rowspan="n" to define how the text flows between rows
      • Data headings
        • <thead>: creates a header section for the table.`
        • <tr>: create a row to insert the data, whether heading or content
        • <th>: creates the headers, with a scope="row" or scope="col"
          • In the <thead> element, scope will be col
          • In the <tbody> element, scope will be row
          • if row headers are needed, then first <th> is the html entity &nbsp;to create an empty column
      • Body
        • <tbody>: creates the body of the table
        • <tr>: create a row to insert the data
        • <th scope="row">: with value of the first column data
        • <td>: create the data in the column. Include the semantic element (for example <time>inside this element)
      • Footer
        • <tfoot>
    • Avoid using id attribute with tables. Very quickly becomes a PITA.

Forms and inputs

This was the most annoying, and least interesting. I might go back to this someday… or more likely, never!

2023-12-27 Links

Daily Reads:

Andy Chaleff in conversation with Dart Lindsley on the Work for Humans podcast

Some takeaways:

  • No one tells you when they stop trusting you
  • trust and respect on a 2x 2 grid. Dismissive when high trust and low respect. Skeptical when low trust and high respect
  • you are allowed to have beliefs but when they are blind beliefs and you use them to judge other people’s behaviour is when it becomes a problem
  • culture as shared expectations

The Unreasonable Effectiveness of Plain Text

Tris Oaten of No Boilerplate makes the case for documenting everything as default, and shares some of his own decision records that work well for small teams.

Bernadette Mayer’s List of Journal Ideas

Pretty sure I’ve picked this up before, but it was a good reminder from Rob Walker nonetheless

The Changing Room Illusion

I’ve watched this a few times now, and am still fascinated at how little I can actually catch.

QOTD:

If we would have new knowledge, we must get us a whole world of new questions.
\ -Susanne Langer, philosopher

Music:

Leonard Cohen: Dance Me To The End of Love

2023-12-26 Links

Daily Reads:

I got a book recommendation: Gabrielle Lakomski, Managing without Leadership. I’ve not read this book, nor found a reasonably priced copy yet, so will go on the backburner for a bit.

What to do with all those notes? Nicole van der Hoeven has ideas that she freely shares. Absolute goldmine of content from this generous lady!

Learning HTML & CSS is starting to payoff already – the Advanced Slides plugin for Obsidian creates some stunning slides with just markdown text wrapped in CSS magic spells. A huge thank you to MSzturc

QOTD:

I don’t want to be a great leader; I want to be a man who goes around with a little oil can and when he sees a breakdown, offers his help. To me, the man who does that is greater than any holy man in saffron-colored robes. The mechanic with the oilcan: that is my ideal in life.

– Baba Amte, social worker and activist

Music:

The Milk Carton Kids – Live From the Lincoln Theatre – never gets old

2023-12-24 Links

Merry Christmas to the two readers of this blog! It will be light reading, I’m still crook, so not a lot of reading today either.

Daily Reads:

I’ve restarted my attempt to learn HTML and CSS specifically because I’m using Obsidian for everything except presentations – and only because I don’t quite grok how the styles apply through all the plugins. 🤞

Slowly going through this 3+ hour conversation between Daniel Schmactenberger, Ian McGilchrist & John Vervaeke on the psychological drivers of the Metacrisis. 🤯

Music:

Carols from King’s: The Choir of King’s College, Cambride

2023-12-23 Links

Illness has taken hold of the adults in the household. Only skeletal routines expected, which doesn’t include posting here…

Daily Reads:

Margaret Atwood does some sermonizing and shares the sermons for us to cackle over and idolize.

Tracy Durnell explains how she’s Choosing between ideas for blog posts and her current WordPress plugins and customisations

QOTD:

How do we get people to understand that it is imperative to invest in potential? Both people and ideas deserve to be developed to allow them to reach their full capacity.
– Terence Eden on a book review of von Neuman by Ananyo Bhattacharya

Music:

Flyte: River

2023-12-22 Links

A wretched man-flu continues its hold over me so loads of hydration and YouTube keeping me company for the 3rd day in a row.

Daily Reads:

I was reviewing my journals from Feb 2023, and was reminded of these two podcasts. From the Unforgettable Presentations with Darren LaCroix & Mark Brown: Peter Drury, football commentator and Steve Spangler, STEM educator on the Ellen Degeneres show.

Dr. Petre’s talk at StrangeLoop 2022 as a general indicator of the conversation we had last night.

Daniel Schmachtenberger: An Introduction to the Metacrisis

QOTD:

Being well adjusted to a profoundly insane society is not a good measure of mental health
– J. Krishnamurthi

Music:

Blaze Foley in a rare recording of Clay Pigeons. I heard this song first performed by John Prine and loved it instantly:

I’m tired of runnin’ ’round
Lookin’ for answers to questions that I already know
I could build me a castle of memories
Just to have somewhere to go

2023-12-22 Links

A wretched man-flu continues its hold over me so loads of hydration and YouTube keeping me company for the 3rd day in a row.

Daily Reads:

I was reviewing my journals from Feb 2023, and was reminded of these two podcasts. From the Unforgettable Presentations with Darren LaCroix & Mark Brown: Peter Drury, football commentator and Steve Spangler, STEM educator on the Ellen Degeneres show.

Dr. Petre’s talk at StrangeLoop 2022 as a general indicator of the conversation we had last night.

Daniel Schmachtenberger: An Introduction to the Metacrisis

QOTD:

Being well adjusted to a profoundly insane society is not a good measure of mental health
– J. Krishnamurthi

Music:

Blaze Foley in a rare recording of Clay Pigeons. I heard this song first performed by John Prine and loved it instantly:

I’m tired of runnin’ ’round
Lookin’ for answers to questions that I already know
I could build me a castle of memories
Just to have somewhere to go

2023-12-21 Links

Daily Reads:

I’ve been digging around the Indieweb and its protocols. As a non-programmer, I find it easier to learn by checking out what people have done with the idea than to try and implement it myself (and waste a ridiculous amount of time around this time every year).

Aaron Parecki claims that the letter R is a vowel. He wrote a 100 songs in 100 days!

I organised a conversation with Dr. Marian Petre with a few friends this evening. She is the co-author of the 2016 book Software Design Decoded, with empirical research on the distinctive habits of high performing software engineering teams. One of the many resources she mentioned was the book by G. Polya titled "How to Solve it" that Dr. Mary Shaw recommended to her.

QOTD:

Allow friendships to come and go. Don’t cling onto friendships because they are old. Cling on to them because they bring you joy and comfort and laughter.
– Annie Macmanus

HT: Recommendo

Music:

A version of Have You Seen The Rain. This is the inspiration for the idea that Drew & I will pull off before the end of this decade.

2023-12-20 Links

Lying in bed, feeling out of sorts – a man flu perhaps – gave me a chance to catch up on some reading. Sharing a few of the highlights.

Daily Reads:

I was listening to the 2023 Nobel Lecture on Monday, and understood so little. This Crash course in cell theory was my first attempt at reparations.

Hunter S Thompson liked weird things like Burning the christmas tree and the house down

Splendid animation of 4.5Billions years of earth in an hour!

Nick Morgan does small talk – just four minutes spent on exchanging unconscious information.

Cory Doctorow: What kind of bubble is AI? Must read, along with Baldur Bjarnsson’s Bad Business AI: Channel 1 Simon Willison is calling out the AI Trust Crisis. Timnit Gebru, Emily Bender, and a whole host of researchers have been calling out the harms of AI for a while. Is anyone listening?

Anne Helen Petersen: One Significant Adult is a moving tribute to a pastor she knew growing up. Took me down memory lane too.

Robin Ince: Who Needs This Blog?

David Epstein: The Christmas Tree Effect and the Subtraction Game in the same article 🙂

Graham Duncan’s Questions didn’t just push at my own boundaries, but seem to be far beyond them.

QOTD:

“The most remarkable thing about my mother is that for thirty years she served the family nothing but leftovers. The original meal has never been found.”
– Calvin Trillin

Music:

Tommy Emmanuel caresses the guitar to tease out What A Wonderful World

2023-12-19 Links

Daily Reads:

Not winter down under, but the general mood around me seems like it. Which is why David Cain’s post "Nobody has a Seasonal Affective Disorder" caught my attention, and I’m glad it did.

Robert Wringham: The lost art of declining politely There are times I wish I said no. I’m not alone, says RoWri, and has some ideas.

In The Reality of Tomorrow, Bob Ewing makes the compelling case for creating the reality of the future.

Peter Gruber: The Four Truths of the Storyteller are simply Truth to the Teller, Truth to the Audience, Truth to the Moment, and Truth to the Mission.

QOTD:

Concepts should be held loosely, because they’re nowhere near as complex as the reality they’re supposedly explaining. Not by many orders of magnitude. They have no truth value in themselves, they just point you to some possibilities, while simultaneously pointing you away from other possibilities.
– David Cain

Music:

FourPlay & Neil Gaiman: Bloody Sunrise