HTML?! Oh what `<tag>`gony!¶

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.

<!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 MapLibreGL</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>

        <main>
            <!-- hint: majority of your lab assignment can go here -->
            <div class="portfolio">
                <!-- Portfolio content goes here -->
            </div>
            <div id="map">
                <!-- Map will be inserted here -->
            </div>
        </main>

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

    </body>
</html><!--(7)! -->

This tells a web browser what type of file this document is.
The HTML code begins here.
Content in the head tag is not displayed on the page.
The title is shown in the browser’s title bar or in the page’s tab.
Content in the body contains most of what needs to be displayed.
This content in body is what is actually being showed!
The HTML code ends here.

Lab Questions

What do you observe in the code?

How does this code differ from the boilerplate code?
Why should everything be enclosed in the html tag?
Do empty spaces matter in HTML?
What is a comment and how do you write one?
Is there a difference between the class and id attributes?

Preview our file¶

Install the Live Server extension by clicking this link:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

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

Let’s fix our code so that it actually looks presentable.
Look for the errors in the template code.
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!

Adding an image¶

To add an image, you will need to use the <img> tag.

<img src="https://www.example.com/image.jpg" alt="A description of the image">

The src attribute is the location of your file. It is highly recommended to use a URL or a relative path to your image.

Adding a local image¶

To add a local image, you will need to place the image in the same folder as your index.html file.

<img src="me.png" alt="A description of the image">

The path to the image is relative to the location of the index.html file.

In VS Code, you can drag and drop the image into the folder where your index.html file is located, like so:

🏁Checkpoint¶

Info

Checkpoints are parts if the lab where you should check your work in case something went wrong!

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

index.html
<!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>

        <main>
            <!-- hint: majority of your lab assignment can go here -->
            <div class="portfolio">
                <!-- Portfolio content goes here -->
                 <img src="me.png">
            </div>
            <div id="map">
                <!-- Map will be inserted here -->
            </div>
        </main>

        <footer id="footer">
            Copyright(2024)
        </footer>
    </body>
</html>

HTML?! Oh what <tag>gony!¶