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 a couple of online tools that will help you understand all of this stuff better:
- One of the main tools for coding exercise throughout the class is an online editor called JSBin.
- The W3Schools website has a cool little tool called "TryIt"; if you tried codeacademy and didn't like it, you might want to see if TryIt is a better match. I encourage you to work your way through their tutorial system, but we will only cover a few basics right now.
- Finally, you may sometimes want to use Thimble, which is a lot like JSBin but (a) simpler and (b) comes with an incredible built-in help system. It can't do everything that JSBin can, but it has a very clear, well-designed interface.
<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.
- Document Structure
Certain tags exist solely to lend structure to a document.
1: <html> 2: <head></head> 3: 4: <body> 5: <header></header> 6: 7: <article> 8: <div> 9: <span></span> 10: </div> 11: </article> 12: 13: <footer></footer> 14: 15: </body> 16: </html>
- Text Attributes
Others give instructions for emphasizing text
1: <B></B> <strong></strong> 2: <I></I> <em></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>
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.
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 (His495)&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 <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.
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…
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.
Some more advanced stuff
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.
- Hackasaurus. Mozilla has a really neat new tool for kids that you might also find useful, called "Hackasaurus X-Ray Goggles. http://www.hackasaurus.org/