University of Bahrain

Information Technology College

Computer Science Department

Semester 1, Year 2006/2007

ITCS 373: Class Lab Work

HTML 2

 

 

Instructor: Dr. Eshaa M. Alkhalifa

 

  1. Find HTML Kit on Start®Programs®HTML Kit®HTML Kit and start the program. 
  2. Click on the empty page icon on the top left to open a new document.
  3. Find this:  <title>Untitled</title> and replace the word untitled with the words Class Assignment Two.
  4. You will now divide your screen into two parts using frames.  This means that the browser will use each part of the screen as completely different from the other parts.  You can do this as with all HTML using tags.
  5. Type in the head part of the document <FRAMESET cols="20%, 80%">  This will divide your screen into two parts, the one on the left is 20% of the total screen size and the one on the right is 80% of the total.
  6. Now you describe what HTML file to read in each of the two parts.  The first part will contain a list of the pages we will display on the right, so we write: <FRAME src= “contents.htm”>.  Notice that both the file that contains the frames and the file that is called contents.htm must be in the same directory.  If they are not, then you must write the path correctly in the “src”.
  7. The second part of the page, will contain two parts.  We will write the title of the site in the top part and insert the content pages in the lower part.  This means we must also divide it using frameset as follows; <FRAMESET rows= “20%,80%”> We then describe what the top frame contains with <FRAME src= “Title.htm”> and what the lower part contains <FRAME src= “main.htm”>.  You can now close the two framesets that you opened </frameset></frameset>.
  8. If you look at the preview window, you will see the dividing lines on the screen but you will find error messages in all parts, because you did not write the files yet.  So you can now create the three pages, each an html file, on its own, and save it.  You can work with any number of files using HTML kit so you can open all the files at the same time. 
  9. Start a new file for title.htm and write in it using <h1> the words MY SITE.
  10. Start a second file for contents.htm and write with <h3> the word HOME.
  11. Start a third file for the main.htm file and write in the center, Welcome to my site.
  12. Now take another look at your page that is composed of 3 HTML pages at the same time.  Now you know how to Adjust the position of the title, to the center, and do the same for the Home.
  13. We now wish to add a line to the contents.htm file that would appear on that side of the page and when it is clicked, the page we wish to access will appear in the lower right frame.  To do this you can use the “target” attribute in the anchor reference command as follows: {In the contents.htm file just below the word Home.}

      <a href="Class_L1.htm" target="frame_C"> Information About Me </a>

  1. There is one problem now.  In order to send the output of the link to a frame, you needed to call that frame with a name which is frame_C, but we never told the main frameset script that this particular frame has this name.
  2. You must therefore go back to the frameset and redefine it as follows:

<frameset cols="20%,80%">

<frame src="contents.htm" name="frame_A">

<frameset rows="20%,80%">

<frame src="title.htm" name="frame_B">

<frame src="main.htm" name="frame_C">

</frameset>

</frameset>

  1. Now look at the preview window again and click on Information About Me.
  2. Now click on the refresh icon on the browser.{the two arrows drawn on a piece of paper}.
  3. In order to make the page more organized, you can alter the word Home, such that it loads the file main.htm into the lower right window frame.  You can use the same command you used for the other window, but altering the file name and what appears.  Do this on your own.
  4. Now you should have two links on the left where each would load a different page into the lower right frame.  You created a frames page.
  5. Our next task will be to use CSS (Cascading Style Sheets) to organize our page.
  6. Open a new HTML file and in the head part of the file add

     <style type="text/css">

      h2 {background-color: #ccff00};

            h1 {background-color: #ff9966};

      h3 {background-color: #00ccff};

      </style>

  1. This will add a style to the document headers by giving each a background color that is specified by the number.  So if we are using <h1> then the background color of the heading to be orange while if we use <h2> then we wish the background color to be green and blue for <h3>.  Save the file with the name style.htm.
  2. You must then access this style file from the other files, by adding the line <link href="style.htm" rel="stylesheet" type="text/css"> to the head part of contents.htm and title.htm
  3. Take a look at the preview page of your frames page.  Can you see the difference?
  4. You can also adjust many different parameters using CSS files and including them into your script.

 

Your page should now look like the example shown on the next page.

 

 

When you click on Information about me, the page you constructed in the first lab will appear in the lower right window.