Class One

Mike Roam’s web class

Note: World Wide Web 20th birthday celebration, 13 Mar 2009.

Web pages were invented from 1989-91 by Tim Berners-Lee, (then working at the European physics research center “CERN”), so that people at different computers could see each other’s data, without needing to run the same operating system and without needing to have all the same software. The compromise necessary was that any computer that wanted to see another had to have some kind of “browser” program, and the shared pages all had a common (and reasonably simple) set of “markup” codes called html. (“HTML” = HyperText Markup Language, which provides a simple set of “tags” that say where paragraphs and headlines and columns and pictures are..) Furthermore, while the browsers could be upgraded to view many other types of data, they had a few favorite built-in formats that they readily understood, including “.jpg” and “.gif” and “.png” for pictures.

Browsers have been written for all kinds of computers, so that any computer’s browser can understand and display the html pages on any other computer’s website. HTML is almost a “works anywhere” language (as Esperanto was intended to be, but HTML has greater popularity). Computers that are connected to the internet can ask to see the HTML pages on other computers by specifying (in their browser) the name of the other computer: “http://www.apple.com” or just “www.saintannsny.org”. The named computer knows where its web pages are stored and will (by default) start off by sharing its “index.html” page.

HTML is not rocket science, and when you look behind the scenes at the “source” code of a typical web page you’ll see that there is not much going on. There will be the words and pictures that your browser displays normally, and there will be some “tags” surrounding those words and telling the browser which words are headlines, paragraphs, columns, etc. Building web pages from scratch, which we will do in this class, is somewhat like building a statue by standing inside it and banging on the metal with a hammer for a while: eventually you step outside of the work and see what it looks like from the outside. Then you can go back inside, and tinker some more before going outside for another look.

Here’s sample code

Simplest first, with discussion and illustrations...

  1. <html>

</html>

    [blank page]

    A typical webpage has a code at the start, “<html>”, and a similar concluding (matching) code at the end, “</html>”. (Notice the “/” slash which means “end of ...”, and that this empty page results in an empty web browser window.) 

  2. <html>
   <head>
      <title>A Tale Of Two Cities</title>
   </head>
   
   <body>
   
   </body>
</html>

    [blank page]

    All pages are supposed to have two parts inside the html: a “head” and a “body”. (Notice that the head contains a “title” which shows up on the top of the browser’s window.) 

  3. <html>
   <head>
      <title>A Tale Of Two Cities</title>
   </head>
   
   <body>
       <p>A Tale of Two Cities</p>
       <p>by</p>
       <p>Charles Dickens</p>
   </body>
</html>

    [A Tale of Two Cities]

    Finally we’re getting a page with some substance to it. (Notice that the “<p>” tags are put around paragraphs.) 

  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Page</title>
</head>

<body>

   <h1>The h1 command makes a big "H"eadline</h1>

   <p>Your HTML code goes here, inside this "body" zone!</p>
</body>
</html>

    [headline and paragraph]

    This page is our latest and greatest, and has several more features. For one thing, it states its “DOCTYPE” at its top so that browsers (and validators) know what version of HTML we are using. (Technically, I am teaching you “XHTML” which is an advanced and improved form of “HTML”, both of which were defined by Tim Berners-Lee’s organization, “The World Wide Web Consortium”, which has the home page www.w3.org.)

    For another thing, this page has a headline which it created using the “<h1>” tag. There are h2, h3, etc for successively smaller headlines.

I’ve found some web sites that seem to do a pretty good job of introducing the basics of web pages. You can put either of the addresses below into a web browser (internet explorer, perhaps): www.w3.org/MarkUp/Guide/ or www.w3schools.com/html/html_intro.asp. If you get a chance to read through either, you’ll be in better shape to know what is going on in class 2. We spent a little time last week actually typing up basic web pages, and both web sites above can show you what to type. The main thing to keep in mind is that in building these web pages we are working behind the scenes with codes that then cause certain things to show up on a web browser’s screen.

I hope you get a chance to play with typing up a page using notepad or simpletext (or even “word” or “pages” or “appleworks”, as long as you save it as a “text” file, NOT as “word doc” and NOT as “html”). When you save your file, you must us a simple name such as “vincent.html” or “my_page.html.” (NOTE: all lower case, no blank spaces or punctuation in the name, and ending with a period followed by “html”. I didn’t use “My Page” but used “my_page.html” instead.) A nice simple web page can be just 6 or 7 lines, and you’ll find samples in both tutorials. I’ll include a sample page at this link and below.

Sample page:

(for copy and paste, save as a text file with name containing no spaces and no capitals and ending in “.html”)

Here is one more tag that you can use in a starter page:
   <img src="barney.gif" alt="dinosaur" width="25" height="70" />
What is unusual about the above tag is that it closes itself with that final slash after a last space, and therefore doesn’t need a matching </img> command. “img” stands for “image”, “src” stands for “source”, and what this command does is tell your browser to put a picture onto your page. (If you don’t have a picture of barney, then just the word “dinosaur” will show on your browser instead, which serves as a courtesy for blind visitors who will have their computer read the words aloud.)

Finally, here is a partial list of things we will cover in future classes:

Revised 2009 mar 13, friday, mjr, © Mike Roam.