Skip to content

HTML?! Oh what taggony!

HTML is what makes up the house for websites to be able to talk to the server. Everything in HTML is surrounded by tags which look like this: <tag> Look Ma'! I'm in a tag! </tag>

Attributes in tags

If we can only use tags, the web would be a pretty boring place. So in order to make each tag unique, we can add attributes to them. To do so, you add an attribute="some value"

For example, we can name a tag something: <tag name="Albert"></tag>

Wow, that’s my name tag! 🤦🏻‍♂️

Boilerplate vs. Template Code

In coding, boilerplate code is ready to use code that people can freely copy and use with no changes. Think of them as ready-to-eat microwave dinners.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>

</body>
</html>

Template code refers to sample code that can be copied and pasted, but requires modifications in order for it to work.

Here is our template code:

index.html
<!DOCTYPE html><!--(1)! -->
<html><!--(2)! -->
    <head><!--(3)! -->
        <title>Hello World with Leaflet</title><!--(4)! -->
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="#">

        <!-- I'd add some style if here if I had any -->

    </head>

    <body><!--(5)! -->
        <header>
            Hello World! <!--(6)! -->
        </header>

        <div class="main">
        <!-- hint: majority of your lab assignment can go here     -->

        </div>


        <div id="footer">
Copyright(2022)
        </div>

    </body>
</html><!--(7)! -->
  1. This tells a web browser what type of file this document is.
  2. The HTML code begins here.
  3. Content in the head tag is not displayed on the page.
  4. The title is shown in the browser’s title bar or in the page’s tab.
  5. Content in the body contains most of what needs to be displayed.
  6. This content in body is what is actually being showed!
  7. The HTML code ends here.

Lab Questions

What do you observe in the code?

  1. How does this code differ from the boilerplate code?

  2. Why should everything be enclosed in the html tag?

  3. Do empty spaces matter in HTML?

  4. What is a comment and how do you write one?

  5. Is there a difference between the class and id attributes?

⚽ In-Class Exercise #1

Tasks

  1. Let’s fix our code so that it actually looks presentable.
  2. Look for the errors in the template code.
  3. Save the file and name it index.html and open it in Firefox.

Extra: If you finish early, try to add your own spin to the HTML file!

Preview our file

Install the Live Server extension by clicking this link:

After you install the extension, click on Go Live.

Your default browser should automatically pop-up, if your default browser is not Firefox , you will need to copy and paste the link over to view it there.

Not using the Live Server extension

If you cannot or do not want to use live server then you will need to right click on your index.html file and reveal in file explorer. Then, double click on the file. Be aware that checking your code in this is not as efficient because there is no auto-reloading feature.