Creative Computing: Week 1

Computers, the Internet and HTML

Assignments for Next Week

What the heck is a catch in the NFL anyway?, Jon Bois, 2015
3 Network Infrastructures, Ingrid Burrington, 2014, pp. 109-129 of the linked document. You are not far from many of the places Ingrid mentions - perhaps go take a walk and see some.

Class Notes

Download and install Sublime Text. This is the text editor we will use to work on HTML, CSS and Javascript files.

Make a folder for this class somewhere on your computer. Drag the folder on to Sublime Text. It should show up in a sidebar under the heading "Folders." Press ⌘-N to make a new file and ⌘-S to save it. Give it the name index.html and make sure you are saving it to the same folder you just created.

Open Google Chrome or another web browser. From Finder, drag the new index.html file into your browser. You will see a blank page - this the browser's interpretation of our empty HTML file.

HTML is a markup language, or a way of organizing information into a format that both humans and computers can agree on. The basic building block of HTML is a tag. There are many different kinds of tags in HTML that allow us to define headers, paragraphs, links, sections, lists and so on. A tag is formatted by placing its name within angle brackets. For example, a tag named h1 looks like <h1>.

The majority of tags come in two parts: an opening and a closing. What we saw above is the tag's opening. To close a tag, we do the same thing, except with a forward slash before the tag's name, like </h1>.

<h1> is the tag for a level 1 heading. What we put in between the opening and closing of the tag is its contents. If we type <h1>My Site's Title</h1> into our text editor and refresh our browser, we will see our header displayed correctly.

The <p> tag is used for paragraph text. If we add <p>Lorem ipsum</p> to our HTML, we can see that the browser interprets it differently.

There are things we can control with an HTML document besides just the body of the webpage. For example, we can change the words that show up in the tab of the browser above the address bar. In order to do this, we need to add some extra tags to help the browser understand our intentions. Update your code to look like this:

<html>
    <head>
    </head>

    <body>
        <h1>My Site Title</h1>
        <p>Lorem ipsum</p>
    </body>
</html>

While none of these new tags change the appearance of the webpage, they are important because they facilitate the organization of our HTML. We can now add <title>My Website</title> inside of our <head> tag and when we refresh the page the text in the tab will have changed.

You will also notice that we can put tags inside of other tags. This is called nesting. When you do this, you must be certain to close the tags in the reverse order that you opened them. For example, this is invalid:

<html>
<head>
</html>
</head>

The correct version of the above example looks like this:

<html>
<head>
</head>
</html>

When nesting tags, it is conventional to indent the child tag. You can accomplish this by hitting the tab key on your keyboard. Properly indented code is helpful for scanning your document and identifying errors. The HTML, CSS and JS that you write for this class must be properly indented.

Make a new file called week1.html. Set it up with html, head and body tags, give it a title and some content.

Now we can set up a link between our two files. Links are created with the <a> tag (a stands for anchor). The text contained within an a tag will become clickable, and when clicked, the browser will go to the provided page. In order for the browser to know where to go, we need to provide a reference URL within the a tag like so:

<a href="week1.html">Link Text</a>

href is called a tag attribute. There are many different types of attribute that we will encounter as the semester goes on. Attributes consist of two parts, a name and a value. They are separated by an equals sign (=) with the name on the left and the value on the right. Add the above code to your index.html and see what happens.

We can also use HTML to insert images into our document. Find an image on the internet and save it into the folder alongside your HTML files. Then, insert the following into your HTML:

<img src="test.jpg" />

The img tag, like the a tag, has an attribute, except this time it is src (as in "source"). The src attribute allows us to point the tag to the location of our image, which for me is test.jpg. You should set the value of src to the name of your image file.

One new thing with the img tag is how there is no distinct closing tag. The forward slash before the closing angle bracket indicates that this is a "self-closing" tag. We will come a few more examples of self-closing tags as the class progresses.

Better Save than Sorry! (Sorry...)

When using any text editor, you need to make sure that you save your files before trying them out in the browser. Changes to a file will not be reflected in the browser if they haven't been saved. Sublime lets us know that a file has been modified because the x in the tab will change into a circle. If this is the case, you can press ⌘-S to save the file. You should get into the habit of pressing ⌘-S whenever you're done typing something.

Terminology

HTML stands for hypertext markup language. The contents of an HTML file is often just called markup.

A tag is used to organize content in our HTML file. Tags can have attributes that provide extra information to the tag. Attributes have names and values.