Smith College HTML Lesson #1
    © D. Weinberger and D. Thiébaut

    HTML Lesson 1

    HTML Lesson #1

      In this first lesson you will learn the basics of HTML. This will enable you to create a simple Web page. Make sure you attend the lecture part before you start on this section.

      The skeleton file that you will start with is shown here 
      <html>
  <head>
    <title></title>
  </head>

  <body>
    <h1></h1>



    <hr>
    <address><a href="mailto:100e-xx@cs.smith.edu">Jane Smith</a></address>
  </body>
</html>

    Step by Step creation of a Web page

      • Login to your Unix account on hermite, following the directions from yesterday.
      • Change directory (i.e. open a folder), and go to the public_html directory: 
        	     % cd public_html
      • Copy the skeleton Web page from the class account: 
        	     % getcopy webpageskel.htm
             % cp webpageskel.htm firstpage.htm
        These command get a copy of the file webpageskel from your instructor's account into your folder. A copy of webpageskel.htm is then made into a new file called firstpage.htm.
      • Edit this file with emacs: 
        	     % emacs firstpage.htm
      • Locate the <title> tags and enter a title for your Web page. Something like My first page will do. This title will appear at the very top of the browser window.
      • Locate the <H1> tags and enter the same title between them.
      • Just to see what this will look like on the browser, exit emacs and save your changes with C-X C-C (Control-X followed by Control-C).
      • Make your file public so that the HTML server can read it and send it to people on the Internet: 
                     % chmod a+r firstpage.htm
        (change the mode of the file so that all can read it.)
      • Start Netscape and in the Location box, enter cs.smith.edu/~100e-xx/firstpage.htm, where you will have replaced xx by your own two-digit Id.
      • You should see your (very empty) page. If you don't, check again the last few steps, making sure that you saved your file, and changed its mode correctly.
      You can now go back to editing your file with emacs, and enter information in the body section, between the <body> tags. For this first page, the information that you enter is not important; just use the following tags and features as you go along:

      • Use <P> tags to start new paragraphs.
      • Use <H2> tags to enter section titles (headers).
      • Copy the picture of your team taken yesterday afternoon into your directory, and include it in your Web page with an <IMG> tag. Here are the steps to do so:
        1. Exit emacs
        2. Locate your picture (try to figure out how to locate the lab pictures by starting at the class homepage: http://cs.smith.edu/~100e
        3. Use the Unix command listed under the picture to copy it into your account.
        4. Make the picture readable by all using the chmod command: chmod a+r PICT000XX.jpg (replace XX by the actual number).
        5. Restart the emacs editor, and inside the body of the page, add an <IMG> tag: 
          	          <P>
	          <IMG SRC="PICT000XX.jpg">
		  <P>
      • Save your file with C-X C-S, and click the Reload button of the Netscape browser. You should see your modified Web page, and the picture in it.

      The page you just created is for your to learn the basics of creating Web pages.


    © D. Weinberger and D. Thiébaut