CS107 HTML Lab #0: Using HTML

HTML, which stands for "HyperText Markup Language," is the main language used to write web documents. This lab will introduce you to a few fundamental HTML ideas, and to the procedure you will use to modify and create web pages.

HTML source code

To view a web page, you use a piece of software called a browser (e.g. Mozilla, Netscape, Internet Explorer, Opera, and Lynx). Web pages are stored as text files that contain visible content (such as this sentence) as well as formatting instructions for the browser. This combination of content and instructions is called the source code or simply the source of the web page, and is typically stored in a file whose name ends with ".html" or ".htm".

To see how this works, try the following:
  1. Go to the View menu on your browser and select the Page Source menu item if you're using Mozilla, or the Source item if you're using Internet Explorer. You should now see a file containing recognizable text plus a bunch of other stuff.

  2. In the browser view of this web page, the first occurrence of the word "browser" is italicized. Scan through the source code to find the sentence containing the italicized "browser." How are italics specified in the source code?

  3. How are the beginning and ending of a paragraph marked in HTML source code?

Modifying a web page

Here are the steps for using Carleton's equipment to do the labs in this course. Try them.

  1. Run Mozilla and find the web page that you would like to modify. This very page, html0.html, would be suitable as a first exercise.

  2. Go to Mozilla's File menu, select Save As, and save the file as S:\Students\cs107\yourusername\html0.html

  3. You now have your own personal copy of the web page's source. Since you will be making changes to your own copy and not to the original, you will want to view your copy rather than the original in your browser. To do this, direct Mozilla to http://prism.mathcs.carleton.edu/yourusername/html0.html

  4. Run the text editor Notepad. To do this:

    • If you are running Windows XP, minimize all windows and click on the Notepad icon on the desktop.
    • If you are running Windows 98, it's on the Start menu: click the Start button, then go to Programs, then Accessories, then click Notepad.
    Once you have Notepad started, go to the File menu, select Open, and open S:\Students\cs107\yourusername\html0.html.

  5. You should now to move back and forth to see the web page's source code in Notepad, and the displayed version of the web page in Mozilla.

  6. Go to Notepad and make some change to html0.html (add a sentence, change the spelling of a word, or whatever). Save your changes.

  7. Go to Mozilla and click on the Reload button. The change you made to the source code should now appear. If you don't see your changes after reloading the page, something has gone wrong. Go back through the steps carefully. If you're still unable to see your changes, get help. Don't go on from here until you have gotten this right.

So, in brief, this is what you will do whenever you want to create or modify a web page: get your own copy of the web page source, edit the source in Notepad, and view your copy (not the original) in Mozilla. Don't forget to save in Notepad and reload in Mozilla.

Designing in private, posting in public

Sometimes, you will want to create and test a web page without making it public until you are done. To do this:
  1. Create the HTML file in Notepad and save it in your private folder (the K: drive).

  2. Use Open Page from the File menu in Mozilla to open the HTML file directly from your K: drive.

  3. Do your work, changing the page in Notepad, saving, and Reloading in Mozilla until you are ready to post the file on the web.

  4. Copy or move the HTML file from your K: drive to your folder on the S: drive, as above.

  5. Don't forget that what you put in your S: drive folder is available to the whole Internet, including automatic web crawlers. Your pages could, for example, survive at www.google.com long after you delete them at Carleton (we'll talk about web crawlers and search engines later in the course).

    In short, be careful what you post. Keep civility, your own privacy, legality, and college policies (including those on academic honesty) in mind when you publish via the web.


Next lab
Lab listings