HTML as Easy as Apple Pie

image-header
 

To do something “… as easy as apple pie” is a common phrase used by North Americans. It means to do something easily.

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

Have you ever pressed some keyboard combination that suddenly opens a new window on your web browser similar to the following?:

Print screen from my inspector

Even thou you have not seen this window in your life, this window is one of the essential tools for web development. It is really important that you familiarized yourself with it. This window is called the inspector or a webpage, or simply an inspector.

There are 3 ways of accessing the inspector of a webpage:

  1. Right-click any element (text, image, button, etc.) from the webpage.
  2. Select “Inspect” (PC) or “Inspect element” (Mac).
  3. Press simultaneously Ctrl-Shift-C (Windows) or Cmd-Opción-C (Mac OS and Linux).
  4. Select the Inspect option from the Developer menu (it can appear as a submenu in View menu on Mac).

Looking at he left side of the inspector, you will notice that there are lines that start and finish with letters o words inside the symbols “<” and “>”. This are elements from the Hypertext Markup Language, or HTML.

This is the first post, of a series of that will be posted, in which I will intend to explain in a simple way the basics of HTML. From its general definition to creating a webpage with styles included.

What is HTML?

From MDN Web Documents, the word hypertext refers to links that connect webpages between them, being webpages from the same website, or in different websites.

Also, MDN suggests that HTML’s markup denotes the buttons, menus, images, videos, and other elements that are on a webpage.

So if we put it as easy as apple pie, HTML describes the structure of a webpage. Also, it interprets to the web browser how the webpage is displayed.

What is the HTML structure?

The letters and words that are between “<” and “>” are HTML tags. Tags denote the type of element located on the webpage. A simple example is:

<p>My cat eats a lot.</p>
(1)        (2)        (3)
  1. The opening tag “<p>” denotes the starting point of the element type paragraph that is located in that position of the document.
  2. My cat eats a lot.” is the content of the element type paragraph.
  3. The closing tag “</p>” denotes the final point of the element type paragraph is located at that position in the document.

If you are asking yourself, “how do you know that the element is type paragraph?“, the answer lies on the letters and words located between the symbols “<” and “>”. From the prior example, the letter p denotes that the element is a paragraph (p from paragraph).

There are multiple tags. The most basic structure of a web document in HTML would look like the following:

<html>
    <head>
        <title>Webpage title</title>
    </head>
    <body>Webpage content.</body>
</html>

How many different tags can you identify? What are the tags for?

If you would like to confirm your answers, leave your email on the form below and you will receive the ANSWERS of the before mentioned questions, and a CHEAT SHEET with the most commonly used tags.

I cannot stand spammers 😤
So I am not going to send you spam neither unwanted emails.

Now its your turn

Its time that you open Notepad (PC) or TextEdit (Mac OS). Even thou neither Notepad nor TextEdit are good text editors for coding, you can use them as a beginner to loosing up your machine writing skills.

Let us do an exercise that will make you feel powerful. It is a simple exercise but it will motivate you to continue to practice writing HTML.

Note: I suggest that you read this article from MikkeGoes.com titled Finding the Best Text Editor for Coding: 7 Top Tools for Programming if you need guidance on which text editor suites you.

Copy and paste the following code on a new sheet from the text edit that you just opened.

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

After copy and pasting, MAKE SURE that the following configuration is set in the document before saving:

  1. The text must be saved as Plain Text (without format).
  2. Encode should be set to Unicode (UTF-8).

Save the document with the extension .html on any file on the computer that is easy to access.

It is REALLY IMPORTANT that you save the document with .html extension (document type must be html).

Locate the document on your computer and open it.

If the document did not open on the web browser automatically:

  1. Right-click on top of the .html document icon, and select “Open with” option to choose the web browser of your preference. The document should open on the selected web browser.
  2. If the prior step did not work, you can copy the location of the document on your computer, and paste it on the web browser’s web address input.

Locate the web browser that just opened and observe the HTML document that you just created.

Note: If you see tags written on the web browser, feel free to jump to the I Can See the Tags on My Browser section of this article.

WOOP! You should see something similar to the following:

Document created with HTML

As you can notice, what you observe on the webpage is the content inside the tags.

On the example you just created, you can see that the content inside the tag <title></title> is located at the page tab. So, now you understand that the <title></title> tag represent the title located at the page tab.

Also, you can observe the content of the tag <h3></h3> because the tags refers to Heading 3 (heading type 3). Finally, the <button></button> tag denotes the button with its content (text information on the button).

I Can See the Tags on My Browser

But, if when you opened the document on your web browser and the code look the same as you wrote it in the text editor (tags are visible), repeat the steps mentioned earlier to identify the misstep.

By the way, you can apply the strategies I explained in the article How to Practice Problem Solving for Web Development without Writing Code to find the misstep.

Note: If you identify a missing step or that the steps can be better explained, feel free to comment below so I can make the necessary changes 😅.

Practice, practice, practice

Powerful stuff, right? Even thou you probably still do not know what the heck are you doing, you will get the hang of it.

My personal experience is that it has been easier for me to understand the code after I see it working. I copy a code that I search on the internet, and I play with it, changing every aspect of it so I can see how the changes work.

In this case, you can add different types of tags so you can see how the different elements are denoted.

Again, I can send to your email a Cheat Sheet with the most commonly used tags. Just enter your email below!

I cannot stand spammers 😤
So I am not going to send you spam neither unwanted emails.

On the next post of this series, you will use the same file with .html extension that you created earlier. So do not delete it so you do not have to created again to continue.

By the Way

I wrote this article listening to the Spotify playlist This is Boards of Canada. It has almost the entire discography of the band Boards of Canada. The band consists of a duo of Scottish brothers, Michael Sandinson and Marcus Eoin. They play downtempo ambient electronic music with certain elements of psychedelia and hip hop.

Playlist of Boards of Canada created by Spotify

Until the next one! 😉

image-pin
HTML: As Easy as Apple Pie Pin

Leave a Reply

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