Class One

24 Feb 2005

Mike Roam

Web pages were invented (from 1989-91, by Tim Berners-Lee, 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, 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" 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 (like 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.

Sample Code Discussion and What it would look like 
<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.)

Sample Code Discussion and What it would look like 
<html>
   <body>
      <title>A Tale Of Two Cities</title>
   </body>
   
   <head>
   
   </head>
</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.)

Sample Code Discussion and What it would look like 
<html>
   <body>
      <title>A Tale Of Two Cities</title>
   </body>
   
   <head>
       <p>A Tale of Two Cities</p>
       <p>by</p>
       <p>Charles Dickens</p>
   </head>
</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.)

Sample Code Discussion and What it would look like 
<!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.

Finally, 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): http://www.w3.org/MarkUp/Guide/ or http://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 microsoft word, as long as you save it as a "text" file,) with a name such as "vincent.html" (all lower case, no blank spaces or punctuation in the name, and ending with a period followed by "html"). 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:

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 25 Feb 2005, mjr, Copyright Mike Roam.