#+POSTID: 151 #+DATE: [2010-09-23 Thu 07:48] #+OPTIONS: toc:nil num:nil todo:nil pri:nil tags:nil ^:nil TeX:nil #+CATEGORY: lab #+TAGS: assignment #+DESCRIPTION: #+TITLE: Lab 01: 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 [[http://en.wikipedia.org/wiki/HTML][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 use a cool little tool called "[[http://www.w3schools.com/html/tryit.asp?filename=tryhtml_style][TryIt]]" from w3schools. I encourage you to work your way through their tutorial system, but we will only cover a few basics right now: ** Tags An HTML Document is composed of [[http://en.wikipedia.org/wiki/HTML_element][elements]] marked off by [[http://www.w3schools.com/tags/default.asp][tags]]. The elements look like this: #+BEGIN_SRC html

This is a parapgraph

#+END_SRC 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 - - - **** Text Attributes - - - **** Linking - - Figure out what these mean by browsing on w3schools. Work especially hard at the tag. Hint: the standard syntax is Text and there are plenty of instances in the code below. *** Exercise Let's quickly compare the text of my recent posting: #+BEGIN_EXAMPLE 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... #+END_EXAMPLE with the HTML code that generates what you see on your screen when you go to the website: #+BEGIN_SRC html div id="post-77" class="post-77 post type-post hentry category-notes-for-class tag-publicsphere">

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

#+END_SRC They look pretty different, right? Now, paste the text-only version into the textbox at [[http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro][w3schools]]. Figure out how to accomplish the following tasks: 1. Make the title :The WWW and the Publis Sphere" into a header. 2. Add a link to "http://www.hackinghistory.ca/author/admin/" to the word "admin" in the second line. 3. Italicize the date line. These are all pretty easy, you can figure them out either by inspecting the marked-up version I reproduced here, or fowwowing the w3schools html tutorial. scripts links and structure 2. add links 3. look at course website - but how is it made? templates in our site. static and dynamic html 4. extensibility? figure that out? 5. ** Styles Styles in HTML are pretty complex, see the [[http://www.w3schools.com/html/html_styles.asp][first]] and [[http://www.w3schools.com/html/html_css.asp][second]] HTML style tutorials on w3schools. Check out their very quick description of [[http://www.w3schools.com/css/css_intro.asp][css]]. *** Exercise 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 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 Inspect the sourcecode of three complex pages on the web and find every instance of a script tag. Note anything you think is interesting about it. ** Templates Finally, just a note on how pages are generated in wordpress out of templates. Quickly read [[http://codex.wordpress.org/Stepping_Into_Templates][this page]] on the wordpress website Can you tell where the template divisions are in a page from our site? Try inspecting the sourcecode.