Lab 02: Understanding HTML

One of the goals of this week is to help you think of the Web as a protocol-driven infrastructure. The language in which that infrastructure operates is called HTML. Like a traveller in a foreign country, you may not need to be fluent in this language, but if you know just a little bit then you’ll be much more comfortable. In this exercise we will introduce an online tool called JSBin, now one of many such tools available online, and somewhat similar to the Codeacademy website you will be using for your assignments.

I strongly advise you to also take this opportunity to download the Atom text editor, as well. Further instructions are on the Tools page.

Tags

An HTML Document is composed of elements marked off by tags. The elements look like this: 

<p>This is a paragraph</p>

Note the opening and closing tags, which surround the text you want to have marked up.

Important tags

Here are a few examples of important tags, though there are many, many more in current versions of HTML.

Document Structure

Certain tags exist solely to lend structure to a document. 

<html>
  <head></head>

  <body>
    <header></header>

    <article>
      <div>
        <span></span>
      </div>
    </article>

    <footer></footer>

  </body>
</html>

Text Attributes

Others give instructions for emphasizing text 

1: <b>bold</b> <strong>strong</strong>
2: <i>italic</i> <em>emphasis</em>

Text Functions

Still others define pieces of structure in a functional way that generally also affects the way text will look on your screen. 

 1: <h1>This is a top-level Heading</h1>
 2: <h2>While this is a lower-level heading</h2>
 3: <p>..and this is a mere paragraph</p>
 4: <ul>
 5:   <li>This is a list item</li>
 6:   <li>And this is a second item</li>
 7: </ul>
 8: 
 9: <ol>
10:   <li>this is a different kind of list</li>
11:   <li>you'll see the differences soon</li>
12: </ol>

Linking

The fundamental, breathtaking feature of the web is its capacity to create links between documents, images, media sources, etc., with absolute disregard for where those resources are physiclaly stored. The syntax for making a link is as follows 

1: <a href="" target="">Text </a>
2: <img src="" alt="" title=""/>
3: <video>
4:   <source src="" type="">
5: </video>
6: <script src="" lang=""/>

Figure out what these mean by browsing on w3schools. Work especially hard at the <a> tag. Hint: the standard syntax is <a href=“link”>Text</a> and there are plenty of instances in the code below.

Exercise 0

Navigate to this page. This is the JSBin editor, an online tool for inspecting code.

Exercise 1

First, let’s quickly compare the text of an old post of mine:

The WWW as Public Sphere Posted on September 21, 2010 by admin

Just a few quick words about the readings this week, which concern the idea of the “Public Sphere“. This phrase is rooted in ideas about enlightenment that stretch at least back to Immanuel Kant. The analyses of Jürgen Habermas (SEP entry), in particular, developed the idea of a sort of virtual space of critical discussion…

Some of the features of this “authentic public sphere” would be

  • a space free from political repression
  • a space accessible to all members of society
  • a form of discourse in which ideas are evaluated on their own merits exclusively, and not arbitrated based on some set of characteristics of the speaker

with the HTML code that generates what you would see on your screen if you went to the website from that year: 

 1: <div id="post-77" class="post-77 post type-post hentry category-notes-for-class tag-publicsphere">
 2:                                         <h1 class="entry-title">The WWW as Public Sphere</h1>
 3: 
 4:                                         <div class="entry-meta">
 5:                                                 <span class="meta-prep meta-prep-author">Posted on</span> 
 6: <a href="http://www.hackinghistory.ca/2010/09/21/the-www-as-public-sphere/" title="11:03 am" rel="bookmark"><span class="entry-date">September 21, 2010</span></a> <span class="meta-sep">by</span> 
 7: <span class="author vcard"><a class="url fn n" href="http://www.hackinghistory.ca/author/admin/" title="View all posts by admin">admin</a></span>                                       </div><!-- .entry-meta -->
 8: 
 9: <div class="entry-content">
10:         <span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Focoins.info%3Agenerator&amp;rft.title=The WWW as Public Sphere&amp;rft.aulast=Price&amp;rft.aufirst=Matt&amp;rft.subject=Pre-class notes&amp;rft.source=Hacking History (His495)&amp;rft.date=2010-09-21&amp;rft.type=&amp;rft.format=text&amp;rft.identifier=http://www.hackinghistory.ca/2010/09/21/the-www-as-public-sphere/&amp;rft.language=English"></span>
11: 
12: <div class="sticky_post"><p> Just a few quick words about the readings this week, which concern the idea of the  &#8220;
13: <a href="http://en.wikipedia.org/wiki/Public_sphere">Public Sphere</a>&#8220;.  This phrase is rooted in ideas about <a href="http://plato.stanford.edu/entries/enlightenment/">enlightenment</a> that stretch at least back to 
14: <a href="http://en.wikipedia.org/wiki/Immanuel_Kant">Immanuel Kant</a>.  The analyses of 
15: <a href="http://en.wikipedia.org/wiki/J%C3%BCrgen_Habermas">Jürgen Habermas</a> 
16: (<a href="http://plato.stanford.edu/entries/habermas/">SEP entry</a>), in particular, developed the idea of a sort of virtual space of critical discussion  </p>
17: 
18: </div>
19:                                                                                         </div><!-- .entry-content -->

They look pretty different, right? Now, paste the text-only version into the HTML tab in this JSBin page.

Figure out how to accomplish the following tasks:

  1. Make the title “The WWW and the Public Sphere” into a heading.
  2. Add a link to “http://www.hackinghistory.ca/author/admin/” to the word “admin” in the second line.
  3. Italicize the date line.
  4. Organize the elements so that the appropriate content is nn the <header> tag, and the rest in the “article”.

These are all pretty easy, you can figure them out either by inspecting the marked-up version I reproduced here, or following the w3schools HTML tutorials.

Styles

Styles in HTML are pretty complex, see the HTML style tutorials on w3schools. Check out their very quick description of css.

Exercise 2

Go back to your TryIt experiment at w3schools. Can you make the text render in the same styles that are used by the website? There’s a clue in the <head> element of any page from the site. Hint: search for “css” in the sourcecode…

Scripts

Though HTML is the language of the web, modern HTML (HTML 4, HTML 5) have “translators” of a sort that allow other languages to run inside the web page. this is actually incredibly powerful, and allows amazing things that were unheard of in the early days of the web, like dynamically-generated lists, moving images, the embedding of video and so forth. You don’t have to know how to script (I can’t really use javascript, for instance) but you should understand that scripting is what makes a lot of today’s web work the way it does.

Exercise 3

Inspect the source code of three complex pages on the web and find every instance of a script tag. Note anything you think is interesting about it.

Hacking your way to HTML mastery!

Tools!

  • View source. When you right click on a web page in any modern browser, you will see a ’view source’ option.
  • developer tools. The Developer Tools for Chrome and Firefox are both amazing. They allow you to temporarily change the code (HTML, CSS, and Javascript) running on any website, and thus test out your ideas for changes. We will use this tool A LOT over the course of the year.
  • jsbin. The awesome real-time html/javascript previewer.

Tutorials