Skip to content

HTML?! Oh what taggony!

HTML is what makes up the house for websites. Without it, the CSS and JavaScript cannot function.

When HTML is surrounded by an opening <tag> and closing tags</tag>, it is called an Element:

<tag> Look Ma'! I'm in a element! </tag>

The / of the second tag is used to close a tag. Always be sure to check if you have unclosed elements! Leaving elements unclosed without a closing tag open will break your page. While some tags don’t need to be closed (like the <link> tag), all elements do!

Attributes in tags

We can also decorate tags with attributes to make them unique.

You put a keyword declaration inside the tag like so: attribute="some value"

For example, we can name a tag something:

<tag name="something"></tag>

But typically, we assign unique names with the id attribute, like so:

<name id="Albert">Haha!</name>

Wow, that’s my correct 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(2023)
        </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?

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.

⚽ 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!

🏁Checkpoint

Info

Checkpoints are parts if the lab where you should check your work to that point!

Check to see if your code looks likes the following before moving on:

index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <!-- hint: remember to change your page title! -->
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="#">
    </head>

    <body>
        <header>
            Hello World <!-- hint: you can make a menu with other links here if you'd like -->
        </header>

        <div class="main">
            <!-- hint: majority of your lab assignment can go here     -->
        </div>
        <div id="footer">
            Copyright(2022)
        </div>
    </body>
</html>