Fun with HTML

Hello everybody,

Michael here, and in this lesson, I thought I’d run it back to a topic I haven’t covered much lately-web development and specifically HTML.

Now, in the way, way past of 2021-2022 I covered some basic HTML concepts like table design and list creation. However, now that I’ve introduced you to the basics, I thought we can have some fun with HTML these next few posts!

<html>Basic outline of website</html>

Before we try out any of the fun new features of HTML, let’s first design the basic website:

<html>
    <body>
        <h1>Michael Plays Around With HTML</h1>
        <h2>In this website, Michael will play around with some cool HTML Easter eggs!</h2>   
    </body>
</html>

Simple enough website outline, right? Here’s what it looks like (on Chrome):

<body><h1>One thing I should note</h1></body>

Before we explore some cool HTML Easter eggs, I think this is worth mentioning. Back in my original series of HTML/CSS content, I was using Atom Text Editor to help me create my content. However, Atom Text Editor reached end-of-life in December 2022. This means that while you can technically still use Atom for your HTML/CSS needs, you would need to work with an older version as no new updates/patches will be released for Atom.

With that said, from here on out, I’ll be using Microsoft Visual Studio Code for any HTML/CSS lessons (it’s not the same thing as Microsoft Visual Studio that I used for my recent C# content). Here’s the link to install it-https://code.visualstudio.com/-like Microsoft Visual Studio, this software is open-source.

Also, once you’ve installed Microsoft Visual Studio on your device and have your code set up, here’s how to run the code:

On the ribbon on the top of the screen, click the Run button and you can either select Start Debugging (F5 shortcut key for Windows devices) or Run Without Debugging (CTRL + F5 shortcut key for Windows devices).

<p>The juicy HTML Easter eggs</p>

Now that we’ve got a very basic website, let’s have some fun with HTML easter eggs, shall we?

First off, let’s add an HTML color picker to our webpage:

<label for="colorpickertest">First, pick a HEX color, any color:</label>
<input type="color" id="colorpickertest" value="#ff0000">

As you can see, below the header that begins In this website..., I added a color-picker along with the label First, pick a HEX color, any color:.

One thing to note about the color-picker (denoted in the <input> tag)-you can use any color as the default, but it must be in HEX format. I used my favorite color red, which is represented in HEX code as #FF0000. If you don’t specify a default color that you’d like to use, black (HEX code #000000) will be the default color.

  • Even though the default color you want to use for the color-picker must be in HEX format, the color picker itself gives you the option of viewing colors in HEX, RGB or HSV formats.
  • For a refresher on color systems in programming, please check out my post Colors in Programming.

<datalist>Autocomplete

The next HTML Easter egg we’ll explore is the use of auto-complete:

<p>Which Marvel character is your favorite?</p>
<input list="heroes">
<datalist id="heroes">
    <option>M'Baku</option>
    <option>Mordo</option>
    <option>Maximoff</option>
    <option>Magneto</option>
    <option>Malekith</option>
    <option>Mantis</option>
 </datalist>

In this example, I have a seemingly-ordinary HTML dropdown with the header Which Marvel character is your favorite? followed by the names of six random Marvel characters.

However, when I type Ma into the search bar, I see the dropdown auto-populate with the names of the four Marvel characters in the list that start with Ma (sadly I couldn’t grab a screenshot of this).

  • As impressive as it might be, unfortunately I cannot program the autocomplete to gather your whole search history. I don’t have the AI capabilities of Google, but wouldn’t that be something?

<p>Feel free to write anything</p>

Now if you have a basic grasp of HTML, you’ve probably seen the </p> tag. However, let me show you something cool you can do with the <p> tag:

<p contenteditable="true">Feel free to edit this content.</p>

This is just like the regular <p> tag in the sense that you can create regular HTML paragraphs, but with one notable exception in the form of contenteditable. Adding this parameter to the <p> tag and setting its value to true will create a freeform text space, where you can edit the paragraph as much as you’d like.

  • Honestly, I think it’s a good idea to include the placeholder text (Feel free to edit this content in this example) as a default.

Now, here’s the paragraph with the default text:

And here’s the paragraph after I edit the text:

Pretty neat, eh?

<progress> & <meter>

For my last pair of HTML Easter eggs, let’s explore the <progress> bar and <meter> bar.

First, we explore the progress bar:

<label for="testbar">Percent of 2025 complete:</label>
<progress id="testbar" value="39" max="100"> 39% </progress>

And here’s the progress bar:

As you can see, we have a simple blue progress bar that appears to be 39% filled. How did I make the progress bar look like its shown on the webpage? In the <progress> tag, I set the value of the <value=> parameter to 39 and the value of the <max=> parameter to 100.

Next, let’s check out the <meter> bar:

<label for="testmeter">Current phone charge:</label>
<meter id="testmeter" min="0" low="0.15" high="0.85" max="1" value="0.92">92%</meter>

In this example, I created a <meter> with five parameters-the id (linking the meter to the above <label>), the min (lowest possible value for meter), the low (along with min, represents lower end of meter range), the high (represents higher end of meter range), and the max (highest possible value for the meter).

The <meter> tag acts similarly to the <progress> tag in the sense that both, in a way, represent percentages of something (whether phone charge, grade, you name it). However, one thing that sets the <meter> tag apart is that it can change its color based on its current value.

Let’s demonstrate the color-changing ability of the <meter> on the same code snippet:

<label for="testmeter">Current phone charge:</label>
<meter id="testmeter" min="0" low="0.15" high="0.85" max="1" value="0.66">66%</meter>

Since I changed the meter’s value to 0.66, the color changed to green. This effect will only work if you have a low and high value defined, as the meter’s green display will only work if the current value is between a defined low and high value.

  • Just to note-using min="0" low="0.15" high="0.85" max="1" value="0.66" or min="0" low="15" high="85" max="100" value="66" would have the same effect on the meter.

Here’s the code for today’s post on my GitHub-https://github.com/mfletcher2021/blogcode/blob/main/coolhtmlthings.html.

Thanks for reading!

Michael

Leave a Reply