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.
<p>This is a paragraph</p>
Note the opening and closing tags, which surround the text you want to have marked up.
Here are a few examples of important tags, though there are many, many more in current versions of HTML.
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>
Others give instructions for emphasizing text
1 <b>bold</b> <strong>strong</strong> 2 <i>italic</i> <em>emphasis</em>
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>
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=""/>
Navigate to this page. This is the JSBin editor, an online tool for inspecting code.
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&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Focoins.info%3Agenerator&rft.title=The WWW as Public Sphere&rft.aulast=Price&rft.aufirst=Matt&rft.subject=Pre-class notes&rft.source=Hacking History (His455)&rft.date=2010-09-21&rft.type=&rft.format=text&rft.identifier=http://www.hackinghistory.ca/2010/09/21/the-www-as-public-sphere/&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 “ 13 <a href="http://en.wikipedia.org/wiki/Public_sphere">Public Sphere</a>“. 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:
- Make the title “The WWW and the Public Sphere” into a heading.
- Add a link to “http://www.hackinghistory.ca/author/admin/” to the word “admin” in the second line.
- Italicize the date line.
- Organize the elements so that the appropriate content is nn the
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.
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 theelement of any page from the site. Hint: search for “css” in the sourcecode…
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!
- View source. When you right click on a web page in any modern browser, you will see a ‘view source’ option.