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
<p>This is a paragraph</p>
Note the opening and closing tags, which surround the text you want to have marked up.
Important tags
Document Structure
<html> <head></head> <body> <header></header> <article> <div> <span></span> </div> </article> <footer></footer> </body> </html>
Text Attributes
1: <b>bold</b> <strong>strong</strong> 2: <i>italic</i> <em>emphasis</em>
Text Functions
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
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
Exercise 1
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.
Styles
Exercise 2
Scripts
Exercise 3
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
- Codeacademy may have the best intro to HTML sequence
- W3 Schools provides excellent tutorials.
- The Mozilla HTML Reference is where I go when I need a detailed explanation of something.