HTML as Easy as ABC

 

Part 2 of the HTML as Easy as Series

HTML as Easy as series intends to explain HTML as easy as possible. Each part of the series is titled after a phrase commonly used by Americans (English that I am familiar with). To do something “… as easy as ABC” means to do something easily.

Note: At some point in this article, you will be using a text editor like Notepad (PC) or TextEdit (Mac) to practice a small exercise. Keep that in mind and on hand.

Wepa reader! I know I took a while 😔, but I am back with Part 2 of the HTML as Easy as Series 🥳.

This second part is about HTML tag attributes. Also, it ends with an HTML exercise, using as a starting point the code we wrote in Part 1.

I do not expect you to remember the code from Part 1. So, I got your back 😉. You can copy the code from below or you can click here for the link to the complete article.

<html>
    <head>
        <title>Today is the day</title>
    </head>
    <body>
        <h3>Let's write machine!<h3>
        <button>Let's Go!</button>
    </body>
</html>

Let us recap what we know about HTML so far.

In Part 1 of HTML as Easy as series, we learned that HTML is a hyperlink markup language for web documents, that HTML has a tag structure that denotes elements on the web document, and we even saw how HTML tags look on the browser.

So let’s continue with HTML tags by learning about attributes.

Go ahead, pin me! 🙃

HTML Attributes

The English language uses adjectives and adverbs to describe subjects and verbs respectively. Attributes behave similarly for programming languages.

HTML attributes are words that provide additional information on how the element behaves or how the element is configured. There are two types of attributes: Global Attributes and Element-Specific Attributes.

Even thou their names kind of give up the purpose of each attribute type, let’s configure a button element to illustrate how attributes contribute to the element denotation. Do not worry, you do not have to write anything during this example. Just keep reading 👀.

First, let’s include the start and end tags to denote a button.

<button></button>
Figure 1: Display of button tag example without tag attributes

Note: Buttons can be denoted using other tags, but I used <button></button> for demonstration purposes.

Second, we will add some text inside the button for instructions.

<button>Click me!</button>
Figure 2:
Display of button tag with text between tags.

I don’t know about you but at this point, I thought about styling the button. Let’s:

  • Modify shape from rectangle to circle
  • Add a background color
  • Set text color and size
  • Set width and height
<button style=“background-color: #000; border-radius: 50%; color: #fff; font-size: 16px; width: 100px; height: 100px;”>
    Click me!
</button>
Figure 3: Display of button tag with text between tags and some styling.

Now, when I click the button, it looks like this:

Did you notice the blue outline? That means that the button is focused. Because the button can be focused when clicked, we can assume that the button is enabled. So, let’s disable the button!

<button disabled style=“background-color: #000; border-radius: 50%; color: #fff; font-size: 16px; width: 100px; height: 100px;”>
    Click me!
</button>

This exercise is an example of a simple button configuration. The configuration includes style and functionality.

Element-Specific Attributes

As the name suggests, Element-Specific Attributes are attribute specific for the element denoted.

Referring to the button configured on the prior section, can you identify which configuration was button-specific?

It’s the functionality.

What do I mean by functionality? The button has the disabled attribute set to true. This means that the user cannot interact with the button, as observed earlier.

Why the disabled attribute is element-specific? Because the disabled attribute applies to elements that the user can interact with such as an input (<input></input>), text area (<textarea> </textarea>), menu (<menu></menu>). Alternatively, the disabled attribute does not apply to an element with a heading tag, let’s say h3 (<h3></h3>).

Global Attributes

Attributes known as Global Attributes are attributes that can be applied to all HTML tags.

Let’s refer to the button configured previously. Style is the button’s global attribute. It has its own set of configuration properties such as background color, border radius, color, font size, width, and height. These properties are CSS styling declarations which are responsible for making the button change its appearance.

Other examples of global attributes are class, id, and hidden. All elements written in HTML can have a class, id, or can be hidden. This MDN Web Docs article lists the most commonly used global attribute.

Side note: You will read me cite MDN Web Docs A LOT. Is because it is a very good source for web development reference, especially front-end web development. Check it out!

Even thou we are not discussing CSS in this article, it is good to mention that classes and ids are commonly used in CSS for selectors.

Another side note: In case you were wondering what a CSS Selector is, MDN Web Docs state that “CSS Selectors define the elements to which a set of CSS rules apply“.

Practice time!

It’s time for you to open, or maximize, your text editor.

As explained earlier, the code that will be used as a starting reference for this exercise is the resulting code from Part 1 of the As Easy As Series.

Here is the link for the complete article, but also you can copy the code from below.

<html>
    <head>
        <title>Today is the day</title>
    </head>
    <body>
        <h3>Let's write machine!<h3>
        <button>Let's Go!</button>
    </body>
</html>

And here is the document display of the HTML document with tags but without attributes,

Screenshot of HTML document with tags but without attributes.
This document is the resulting exercise of Part I of the As Easy As Serie.

Let’s use HTML tag attributes to hide the button and align the header text to the right side of the document.

……. and violá

Screenshot of HTML document with tags with attributes.

Try to come up with a solution before peeking into my answer.

You will get to the answer by scrolling multiple gifs.

You CAN come up with the answer!

You GOT IT in the palm of your hands. You CAN do it!

Yeah… YOU GOT THIS!

Here is my answer:

<html>
    <head>
        <title>Today is the day</title>
    </head>
    <body>
        <h3 style="text-align: right; width: 100%;">Let's write machine!<h3>
        <button hidden="true">Let's Go!</button>
    </body>
</html>

You are…

… for trying. You have a step ahead than much of the people that use a computer. Most people do not have any idea of how to do what you just did.

Coding is hard and it is difficult to get concepts from the get-go, but if you practice… practice… practice… it WILL get easier. Do not give up!

Use the same code, and keep reading resources such as MDN Web Docs to practice. I wrote an article Resources for Newbie Coder (link here) with the resources I use every day while coding.

Always remember practice and patience will make you a better programmer.

By the Way

I wrote this article while listening to the Warpaint discography on Spotify. Warpaint is definitely one of my favorite bands of all times. They play psychedelic pop-rock. The first time I saw them live, I was so mesmerized by their sound, and stage presence that I was convinced that they were witches who cast a spell on me during the performance. Their drummer, Stella, has inspired me to learn to play drums. Check them out below!

This is Warpaint Playlist made by Spotify

See you later! 🙆‍♀️

Go ahead, pin me! 🙃

Leave a Reply

Your email address will not be published. Required fields are marked *