01. "I am typing in an HTML (file)"

Introduction to HTML

So I'd like to re-introduce you to HTML, assuming it scares you, you might have forgotten it, or you may have never encountered it.

The ABSOLUTE minimum.

The absolute minimum you can do, is create a text file, called something.html and then add text in it.

hello world!

Take a moment to test this out in your browser. It should work! If you view the source you'll see the same text.

If you're curious about where "hello world" comes from, here's the wikipedia page

What's a tag?

Presumably, you encountered HTML tags in (VIS1330) Lens & Time, DMD1, or another class at a previous institution related to web design or development. Here, we'll review some of the relevant tags for this exercise. Note, if you're feeling precocious, we will not talk about CSS, or styling yet! However, feel free to let me know, tactfully, if you're bored.

A tag is a way that we tell the html page one of the following things:

What the relevance of a given piece of text is (is it html? what part of the document? is it navigation? is it a paragraph of text?)
Where in the hierarchy of the page is a given piece of text (tags can be nested within other tags)
We want to show or listen to some other piece of media (images, audio, video, etc)
We want to connect to some other page (an actual hyperlink, a css file, a javascript file, a font)

Additionally, as our pages become more complex, we will want to keep our text within tags and structure our page in a specific way so that it will display in a predictable way.

The acronym for HTML is HypterText Markup Language the tags are simply how we "mark up" our text, and then the linking allows our text to become "hyper" so to speak.

Most tags have an opening, and a closing with the slash in front. Some like the img tag for example do not have a closing tag.

Here's how we can start adding tags:

<html>
    hello world!
</html>

Note that we try to align the tags, in such a way that we can see them at the same indentation level. This is not necessary, but helpful visually.

Nesting tags

We can place tags within eachother. This is to indicate that one is inside or nested within the other. This indicates it is lower hierarchically. The important tags we need for our page are the "head" and the "body" as shown below:

<html>
    <head>
    </head>

    <body>
        hello world.
    </body>
</html>

You should not put anything you want the viewer of the page to see in the head tag! It will technically work (let's try it), but again it will effect the expected result we would like to see.

Note again, that we indented head and body at the same level! This makes it more easily discernable that head and body are at the same level.

Other stuff that is helpful for the browser

The below new tags should not effect how the page is rendered but they are important.

doctype renders the page with current standards.
setting the language to English helps assistive technology like screenreaders know the page is in English and has specific pronunciation rules
charset sets how the characters are rendered behind the scenes, this is helpful for consistency.

The other new tag you have probably seen before is the header tag. When we apply h1 (we can choose h1 - h6), we can see it has a specific style (larger and bold)

<!doctype html>
<html lang = "eng">

    <head>
        <meta charset = "utf-8">
        <title>hello world page! </title>
    </head>

    <body>
        <h1> hello world! </h1>
    </body>
</html>

What to do for homework

The following homework is based on this sound art piece:

The piece is by an artist named Alvin Lucier. He said a specific phrase, recorded it, and then played it back many many times in the same room, re-recording until he was left with the resonant frequency of the room. He had multiple reasons for creating this piece, but one thing very interesting to experience as you listen to it, is to think about how you feel as you hear the same phrase again and again.

You will take the minimal html page, and you will type it 50 times, into 50 different HTML documents. You will number them such that they appear in the same list of files: LASTNAME_firstname_01.html etc. The leading zero is important.

You will also add a comment at the bottom of the page, it will have the date, time, the number of the page, and a sentence or two about how you are feeling.

so my page #25 would look something like this:

SANTIAGO_benjamin_25.html

<!--
 /$$      /$$           /$$                                             /$$
| $$  /$ | $$          | $$                                            | $$
| $$ /$$$| $$  /$$$$$$ | $$  /$$$$$$$  /$$$$$$  /$$$$$$/$$$$   /$$$$$$ | $$
| $$/$$ $$ $$ /$$__  $$| $$ /$$_____/ /$$__  $$| $$_  $$_  $$ /$$__  $$| $$
| $$$$_  $$$$| $$$$$$$$| $$| $$      | $$  \ $$| $$ \ $$ \ $$| $$$$$$$$|__/
| $$$/ \  $$$| $$_____/| $$| $$      | $$  | $$| $$ | $$ | $$| $$_____/    
| $$/   \  $$|  $$$$$$$| $$|  $$$$$$$|  $$$$$$/| $$ | $$ | $$|  $$$$$$$ /$$
|__/     \__/ \_______/|__/ \_______/ \______/ |__/ |__/ |__/ \_______/|__/
                                                                                                                                            
(if you want to add text like this to your comments use this link
 https://patorjk.com/software/taag/)  

 this is totally not neccessary but another thing we can do with comments!
-->
<!doctype html>
<html lang = "en">
    <meta charset = "utf-8">

    <!-- these comments are optional but appreciated -->
    <!-- as visual separators -->
    <!-- HEAD -->
    <!-- ////////////////////////////////////////////// -->
    <head>
        <title> hello world! </title>
    </head>
    <!-- ////////////////////////////////////////////// -->

    <!-- BODY -->
    <!-- ////////////////////////////////////////////// -->
    <body>
        <h1>hello world!</h1>
    </body>
    <!-- ////////////////////////////////////////////// -->

    <!-- 
    (THIS COMMENT IS NECESSARY!)
    It is now, 01/25/2026, and it is 06:25AM. Page #25
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    Captain's log.

    I'm feeling good because I took a break last night,
    my hands were hurting a little so I stopped.
    My eyes tend to get blurry when I am sleepy as well. 

    XOXO
    <3 Ben
    -->
</html>

How will this be graded?

You must have 50 .html files
The numbers must display in order in a folder (if organized by name)
The files must have the minimum starting structure (doctype, language, meta charset, title)
The titles must be "hello world"
The body must contain an h1 tag, inside that, will be the words "hello world"
Before the closing html tag, you must have a comment that functions as a "log." It will have the date, time, the number of the file, and then a brief one or two sentence statement about how you're feeling as you write the html files.
Your tags must be indented to reflect the hierarchy of the page
Extra credit for creativity in the comments.
You will receive some amount of deductions for inaccuracy or errors (for example forgetting a slash or closing tag)