University of Bahrain

Information Technology College

Computer Science Department

Semester 1, Year 2006/2007

ITCS 373: Class Lab Work

HTML 1

 

 

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 One take a look at preview to see if these words appear at the top of the screen next to the title.
  4. Now look at View ® Preview in Browser ® Preview in default browser.  Look for the sentence you wrote at the top left hand side of the screen.  This is where the title text appears.
  5. Go back to your HTML Kit Editor page and following the <body> tag write <h1> My First Page </h1> Look at the preview page to see what happened.
  6. Now write before that statement <center> and following it </center>  What happened here?
  7. You wrote a line on an html page and gave it a title. H1 means heading size 1, you can try h2, h3 if you wish to see how the size of the title differs.
  8. Now go to the <body> tag and add to the tag so that it looks likes this <body bgcolor= “cyan”> and look at your page.
  9. Save your page somewhere on the desktop.  Notice that you can open it from the desktop just by double clicking it.
  10. Go back to the editor and add the letters <img you will notice that HTML Kit helps you complete commands.  This will not happen on your answer paper in a test, so make sure you learn the commands.  This command allows you to insert an image into the file.  Write between the quotes for the src which is the source file of the image this: http://itcs.silvertair.com/files/images/005.jpg and for the alt which what appears if the image cannot appear this: I’m sorry you could not see the joke.
  11. Now go and change the image number from 005 to 004, and preview it again.  You should see an X and the line you write.  Change it back to 005 so that we can see the joke.
  12. Write under that line the following: <br><br> So that you have leave some space between the image and your writing.  Then write My hobbies are:  See what you wrote in the preview window.
  13. Now write <UL> which starts an unordered list.  Then write <Li> which means I will now write a list item.  Next to that write Firing People  See what you typed in the preview window.  The dot appears because you asked for an unordered list.  If you ask for an ordered list by using the tag <OL> you will get numbers.  Change it to <OL>.
  14. Add other points to your list as follows:

2.            Studying Internet Technology

3.            Reading about the Internet

4.            Collaborating with my friends

  1. Now add a nested list by using the tag <UL> then <li> and following that with the points

·        Through the online forum

·        In class

  1.  Take a look at the preview window. Close your lists  </ul></ol>
  2. You can make sure it starts writing in the next line by writing the <br> tag once.
  3. Write <b>My Grades Last Semester:</b> this tag makes the words appear in bold.
  4. Start a table by typing <table>  Then start a table row by typing <tr> Then start a table data item by typing <td>
  5. Write subject 1  Then close the data item and start another one to write subject 2 and subject 3.  They will appear as follows in the editor

<td>subject 1</td><td>subject 2</td><td>subject 3</td>

We can also close the line we added with </tr>

  1. look at the preview screen.  We forgot to draw a border for this table, so go back to the editor and make your <table> tag look like this <table border = “1”> and look at the preview screen again.  Do you see the difference?  This means that tables can be used to organize the screen output without showing any of the lines.  You may get a screen output for your assignment that will require a table, but no lines may be visible.

Now let us add another line to our table as follows: <tr><td>A</td><td>A</td><td>A</td></tr>

  1. All the A’s appear to the  left of the squares.  We can place them all in the center by changing the <tr> tag that appears before that line into <tr align= “center”>.
  2. What if we now wish to add a line to the table that will span the whole table.  We just add <tr><td colspan= 3> Semester GPA=4.0</td></tr>
  3. You take a look at your table and think..no the color of the background of the cells is not right.  You change the table tag from <table border = “1”> to <table border = "1" bgcolor="#ffcc66">.  You check the preview screen.
  4. Now, you wish to add a column at the beginning of the table that spans the two rows except it contains a small picture.  You go to the table code, following the <table border = "1" bgcolor="#ffcc66"> tag and the tag for the start of the first row <tr> and write

      <td rowspan=3><img src="http://itcs.silvertair.com/files/images/0001-0309-2419-5022_SM.jpg"></td>

  1. Now close your table </table>
  2. The image has made the table size grow.  Can control the size of the image by add a height parameter to the image tag. <img src="http://itcs.silvertair.com/files/images/0001-0309-2419-5022_SM.jpg" height="50">  Now the image is smaller.  Notice that it adjust the width here according to the height you set to keep the proportions of your image correct.
  3. Your page still missing out on something very important.  It has no Links.  So add a link to your page by adding a line <a href="http://www.uob.edu.bh">Go here if you don't believe these are truly my grades</a>  “a” stands for Anchor as on a boat, and it “links” the address given by “href” with the words that are between the two tags.  See the results in the preview window.
  4. Last but not least you must write your name and student number on your page.  You write <br> My name is: {write your name here} <br> My student number is: {write your student number here}

 

 

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