The Internet

  • How did the Internet get started?

    The catalyst for the Internet was the launching of the Sputnik rocket by the Soviet Union in 1957. In response the United States government created the Advanced Research Projects Agency (ARPA) within the Department of Defense to establish the United States lead in science and technology applicable to the military.

    In 1969, the Internet as we know it began as a network of four computers located at the University of California at Los Angeles, the University of California at Santa Barbara, the University of Utah, and the Stanford Research Institute.

  • How does it work?

    The way the Internet works in terms of transferring information from one point to another is through a method known as packet switching. Packet switching is a method in which the information, when it leaves the source, is broken into packets which are sent along the network to the destination and the packets are reassembled at the destination.

  • What do those acronyms we hear so much really mean?

    There are many acronyms which we hear when people talk about the Internet. Here are a few of those acronyms.
    The remainder of this class meeting will be devoted to the creation of a web document or documents.

  • HTML basics

    Each html document contains a head section and a body section. The head section contains certain information about the file. The body section contains the code for everything that is shown in the web browser window when you view the contents of a site.

    The following is a skeleton of an HTML document.

    The Skeleton of an HTML Document.

    <html>
    <head>
    <title>Title</title>
    </head>
    <body>
    ...
    </body>
    </html>


    The head section

    The head section of an html document contains general information about the html document. The major item contained in the head section is the title. The title is what is displayed on the title bar of the browser window when you access the html document. There are several other things which can be placed in the head section. There is not time to go into each of them but one of them is the tag script. There is a popular scripting language which exists right now called JavaScript. Do not confuse Java and JavaScript. JavaScript is not a subset of Java. Java is a self-contained programming language. JavaScript is a language whose code is interpreted by a program like a web browser.

    The body section

    The body section contains the HTML code which displays the contents of the page when you access the page. You have almost total control over how resources are displayed on your page. Let us look at the body tag and some options that are at your disposal.

    There are several tags which you may place inside the <body> tag.
    1. Background - the background tag allows you to use an image as a background. The browser will tile the browser window with the image until it fills it up. One problem that can occur is seams. You will have to experiment with the background image to see if the browser leave seams between copies of the images.

      Follow this link to see a collection of backgrounds.

      There are two basic types of images that are supported by almost every browser.
      1. GIF - Graphics Interchange Format - The most common image format in World Wide Web Applications. A GIF image can have 256 unique colors because colors are stored in 8 bits.
      2. JPEG or JPG - Joint Photographic Experts Group - A format that was designed expressly for storing photographic images in a compact digital form. JPG images support millions of colors.

        Both jpg and gif images use compression so that file sizes are relatively small.


    2. Bgcolor - the bgcolor tag allows you to use a solid background color instead of an image.

      One problem that comes up when using background images or background colors is that the default text color that your browser uses may not blend well. In some cases, the default text color that your browser uses may be almost invisible on your background image or background color. In order to get around this problem, there are three other useful tags which may be used within the <body>.

    3. Text - The text tag allows you to change the color in which text is displayed in your document. You specify a color by using the following format:

      text=#RRGGBB

      RR GG and BB are hexadecimal digits. Hexadecimal is a number system which has 16 digits, 0-9, A, B, C, D, E, and F. RR GG and BB are hexadecimal digits which represent a color. There are 256 different shades of red, green, and blue. Sometimes it is difficult to tell how a particular color will look except for trying it. To this end, there is a program you can use to test what a red, green, and blue combination will look like. This program allows you to input red, green, and blue components in decimal numbers from 0 to 255. It will then allow you to see what the combination looks like and display the hexadecimal equivalent. You may find the program at http://www.mathstat.usouthal.edu/~lynn/applets/Tester.html.

      One of the most important features of a web document is that it allows you to jump to other Internet sites through hyperlinks. When a hyperlink is present in a document, it is underscored, and by default turns blue. However, as with text color, we may choose a background image or background color which does not blend well with blue. Therefore, there is a tag which allows us to change the color which a link turns.

    4. Link - the link tag changes the color which a non-visited hyperlink turns. We use the same color code as we do in the text tag.

      Another feature of a web browser is that when we follow a hyperlink, that link changes color. This is different than the color which is used for a non-visited link. Therefore, there is a tag which allows us to change the color to which visited links change.

    5. Vlink - the vlink tag changes the color which a visited hyperlink turns. We use the same color code as we do in the text tag.
    Features which can be inserted into the body of a document.

    1. Hyperlinks - As stated earlier, one of the most useful features of the World Wide Web is that each document can contain one or more links to other resources on the World Wide Web.

      To create a hyperlink.

      Suppose we are creating a web document, and we wish to place a link to a document whose URL is http://www.sun.com. We wish for the link on our page to be the word Sun. The following is the format for making the hyperlink.

      <a href="http://www.sun.com">Sun</a>

      a means anchor. That is, we are starting an anchor. The second element in the tag is href which means that everything between the > and </a> will be a reference to the URL contained within the quotation marks. So in our document the word Sun will be underscored and highlighted with the color we specify for non-visited links, and if we click on the word Sun, our browser will try to load the referenced URL.

    2. Images - We also may place images on our web document. One thing that needs to kept in mind is that most people access the web through home computers with modems that are relatively slow. Therefore if our web document has a high image content, then even though we may have a very nice page, most people are not patient enough to wait for the whole page to download. The best solution to this problem is to establish a hierachy of pages. That is we can build a higher level page which contains links to other pages, and these page might contain a portion of the images we want to display. Another solution is to display what is called a thumbnail, that is a small replica of our image which is a hyperlink to the actual image.

      Suppose we have an image on our site called cantor.gif. The following is the HTML code which will display this image on our web page.

      <img src="cantor.gif">

      Follow this link to find a collection of images.

    3. Tables - We may display organized text using tables.

      To begin a table, we include the tag <table border=n> where n is some integer. The border is not necessary. If you don't include the border, then your text will still be displayed in an organized form, but there will no lines that show up on the screen. In many situations, this is useful.

      Two of the most useful options in a table are <tr> and <td>. The <tr> tag begins a table row. The <td> contains an individual column element within a row. Both <tr> and <td> tags require an accompanying </tr> and </td>, respectively. Also, the <table border=n> tag requires an accompanying </table>. If you forget the </table>, your table will not display. As an example, let us considering the problem of three people, Edward, Sharon, and Jeff. Each of these people works at the same company, and the CEO of the company required their supervisor to supply him with a web page which contained their salaries, number of years with the company, age, eye color, and favorite talk show host. We could display this information as follows.

      <table border=3>
      <tr><td>Person</td>
             <td>Salary(annual)</td>
             <td>Years with Company</td>
             <td>Age (Years)</td>
             <td>Eye Color</td>
             <td>Favorite Talk Show Host</td></tr>
      <tr><td>Edward</td>
             <td>$200</td>
             <td> 5</td>
             <td> 20</td>
             <td> Blue</td>
             <td> Jerry Springer</td></tr>
      <tr><td>Sharon</td>
             <td>$500</td>
             <td> 90</td>
             <td> 100</td>
             <td> Red</td>
             <td> Oprah Winfrey</td></tr>
      <tr><td>Jeff</td>
             <td>$300</td>
             <td> 1</td>
             <td> 13</td>
             <td> Green</td>
             <td> Rosie O'Donnell</td></tr>
      </table>

      If you had typed the above into your web document, this is what it will produce.

      Person Salary(annual) Years with Company Age (Years) Eye Color Favorite Talk Show Host
      Edward $200 5 20 Blue Jerry Springer
      Sharon $500 90 100 Red Oprah Winfrey
      Jeff $300 1 13 Green Rosie O'Donnell


      There are many enhancements we can make to a simple table. There is not time to go through them all. But any good reference book on HTML will explain all of the options available to you.

    4. Mailto links - Sometimes when we are viewing a web document on our browser, if we click a hyperlink, instead of being taken to another resource on the World Wide Web, we are taken to an e-mail session if our browser has been properly configured. This is brought about by a mailto link. Suppose you wish to set up a link on your page which will allows someone to automatically send e-mail to my address. The following is the format we would use to set up the link.

      <a href="mailto:lynn@cis.usouthal.edu">lynn@cis.usouthal.edu>

    5. Image Maps - We may associate with an image file a map file. We may use any shareware program which will allow us to determine the coordinates of any point in the image. The map file is a text file which contains information pairs. These pairs contain an area of an image and the URL which will be loaded if we click on that area of the image. As an example consider the following page.

      Clickable image map of the United States

      The associated map file

      lviewp1a.exe - This is a shareware program you can use to determine coordinates.

    6. Java Applets - One of the most popular programming languages that exists today for creating applications for the World Wide Web is Java. Java is an object-oriented programming language. You can create stand-alone applications or programs which run as part of a web document. Programs which run as part of a web document are called applets. The School of CIS is now integrating Java into its curriculum. We have already seen an example of a Java applet when we looked at the Color Tester. Here are a couple of other examples of simple Java applets.



    7. Text Format - Since HTML is a markup language, there are many features which control the appearance of text. The following is a list of a few of the major text enhancements which are available in HTML.

      • Centering text - To center text in HTML we use the tags <center> and </center>. The text enclosed between the tags is centered between the left and right margins of the browser window.
      • Line breaks - In order for the text you place in your web document to appear on the next line, you must insert a <br> tag. <br> does not require a corresponding end tag.
      • Vertical space - HTML does not respect vertical space. That is no matter how many lines you leave blank in your document, HTML will ignore them. To insert vertical space in your document, you must use multiple line break tabs.
      • Headings - HTML allows you to use predefined heading sizes. There are 6 different headings you may use. To use these headings place the text you want to be emphasized within the tags <hn> and </hn>, where n is an integer between 1 and 6.
      • Font sizes - You may also choose to use a font tag to change the size of text. The format is <font size="+n">text</font>, where n is the number of font sizes above the default at which you wish to display the text.
      • Color of text - You can use the text tag to globally change the color of text. You can also use the font tag to change the color of individual text. The format is <font color="#RRGGBB">text</font>, where RR and GG and BB are the red, green, and blue components of the color as used in the text tag.
      • Separation of Text - You may divide the text on your page by placing a horizontal line in the browser window. To do this insert the tag <hr>. <hr> does not require a corresponding end tag.
      • Boldface - To make text boldface place it within the tags <b> and </b>.
      • Italics - To italicize text place it within the tags <i> and </i>.
  • How do I make my web pages available to people who might want to see them?

    We have already seen there are several sites on the Internet which offer free web space, such as geocities. When you place html documents in your account at geocities, they are available to anyone with a browser 24 hours a day.

    There are ways in which we can make web pages and files available on a temporary basis. One way is to install a web server on your computer. One such server which you may use on Windows 95 is ohttpd10.exe. While you are connected to your ISP, you are given a valid IP address. To find your IP address, at a DOS prompt type winipcfg. While you are logged on to your ISP, you can give people your IP address and they can place that IP address into your browser. One use of such a server would be to make files available to someone. Suppose, for example, you have alot of sound files which a friend of yours wants. Let's say for instance they are stored in a directory called c:\sounds. Then you could use the following steps to make those files available to your friend.
    1. Run ohttpd10.exe.

    2. Go to the Admin menu and select properties.

    3. Click the Server tab and change the Server root to c:\sounds

    4. Find your IP address by typing winipcfg

    5. Give your friend the IP address

    6. Tell your friend to start a browser and load the following URL http://youripaddress/
    Your friend can then download files by right clicking on the name and selecting Save Link As...

  • Where can I learn about HTML?

    There are many resources on the World Wide Web which helps you learn HTML. One of those is a resource that has been available for many years, A Beginner's Guide to HTML.
  • Some other notes about creating web pages

    An old cliche states that "If it ain't broke, then don't fix it.". In a way this applies to the learning of HTML. It is not necessary to reinvent the wheel each time you create a web document. The World Wide Web is rich in examples of HTML documents. You have the ability to download to your machine any file on the web that you can view. Therefore, if there is something on the Web that you like you can see how someone did it. This is also available to you using View/Page Source.