, , , , and . All these tags come to make some text stand out from the rest of the text, usually since it is a quote or simply for emphasis. The first four tags are browser dependant. That is, each browser may display a citation or a block-quote in a slightly different way - bold font, italic, centered etc. The last three tags will always result in the exact same thing - for bold face font, for underlined text and for italicized text. Also, the tag enables us to control the size, style and color of fonts using the attributes SIZE, FACE and COLOR. Let�s look at an example. Look at the following HTML code and the resulting web page and try to see exactly what each tag does:

Some Thoughts About Harry Potter

Did you know that in the book Harry Potter and the Sorcerer's Stone there is more than one Quidditch game? In the movie with the same name there is only one such game.

Have you ever played Quidditch? In an interview with Oliver Wood, the captain of the Griffindor Quidditch team, Wood said:

I don't think Quidditch is a very dangerous sport. It's true that every once in a while one of the players will totally vanish, but usually they are found a month or two later in some remote province in Romania, usually in a dragon's nest.

I Don't know, sounds pretty dangerous to me, so if you play Quidditch make sure to wear a helmet and maybe take some Anti-Dragon spray with you. Note that inside both the

and the

tags we have a tag. Nested tags are allowed and thus we have even more control over the design of our web page. Problem 4: (1 point) build a web page using the various tags introduced in this section. The title of your page should be �My favorite food of all times.� Again, make sure to make your page interesting and visually appealing. Save your web page as yummyFood.html. Pre-formatted text What if you wanted to build a web page that presents some Java code? Since HTML ignores white space, you would have to insert many
tags and tab characters (   inserts three non-breaking white spaces). That would make life kinda hard:

public class Hello
{
  public static void main(String[] args)
  {
    System.out.println("Hello World");
  }
} It is a lot easier to use the

 tag, which makes sure to leave the text in the exact same format it is in the text editor. This way you just enter the text the way you want it to be presented: 








public class Hello
{
   public static void main(String[] args)
   {
      System.out.println("Hello World");
   }
}




 In both cases the result is exactly the same: Problem 5: (1 point) Build a web page displaying the above �Hello World� program. Make sure you are using a mono-space font, like COURIER NEW. Also, make sure the words are displayed in color, just like in TextPad - blue for reserved words, red for parenthesis, braces and brackets, darkblue for the words String and System and Teal for the string itself. Save your file as hello.html. Lists and tables The 
 and 
 tags are used to create unordered and ordered list, respectively, using the 
 tag for the actual bullets: 






What I Like Eating



   
Pizza
   
Steaks
   
Milk Chocolate





What I Don't Like Eating


   
Fish
   
Sour Cream
   
Dark Chocolate





 To create tables we use the following tags:  to declare the beginning and end of a table,  to declare the beginning and end of a table row, 
 for the table column headers and 
 for the data in the column: 






Crew Members of the USS 
Enterprise
   

      
Position
      
Original Series
      
Next Generation
      
Enterprise
   
   

      
Captain
      
James T. Kirk
      
Jean-Luc Picard
      
Jonathan Archer
   
   

      
Chief Engineer
      
Montgomery Scott
      
Geordi LaForge
      
Charles 'Trip' Tucker III
   
   

      
Chief Medical Officer
      
Dr Leonard 'Bones' McCoy
      
Dr Beverly Crusher
      
Dr Phlox
   
   

      
Science Officer
      
Mr. Spock
      
Who was it?
      
T'Pol
   




 Problem 6: (1.5 point) Build a web page that contains an unordered list of your 5 favorite songs of all times, an ordered list of your 5 favorite movies of all times and a table showing all the classes you are taking this semester, and what you plan to take in the following two semesters. Save the file under the name favorites.html. Images Now comes the fun part. So far our web pages had only textual elements. Informative, but a bit boring. The  tag helps us make our web pages a bit more alive and interesting by adding images of type .gif or .jpg (or .jpeg) to our documents. Using the various attributes of the  tag we control the image. The SRC attribute gives the complete or relative address (or URL) of the image file, ALT provides text that would appear if the image does not load (in case of error or if the browser is set to not load images). The HEIGHT and WIDTH attributes control the size and receive numerical values. It is possible to use the WIDTH attribute with a percentage, thus setting WIDTH to be, for example, 80% would stretch the image to be 80% of the browser window�s width, while keeping the image�s height in proper ratio to its width. It is important to use the SRC attribute wisely, and we highly recommand using reltive addresses. Let's look at a common problem with the SRC attribute. Let's assume that you are now at your working directory: J:\myDirectory and let's say that you have an image called answersToFinalExam.jpg in a subdirectory: J:\myDirectory\images\answersToFinalExam.jpg One way to include that image in your HTML document is using the complete address of the image:  Now, when you finish working on your HTML document and you want to submit it to your lab instructor, you copy all your files to a floppy. Now your floppy contains your HTML document, a sub directory called images and in it the image answersToFinalExam.jpg in that subdirectory. But now, when your lab instructor opens your HTML document (probably on his computer, not on yours) the image will not load. Why? The reason the image will not load is that in your HTML document you specified the image as located in J:\myDirectory\images\answersToFinalExam.jpg but your HTML file is now used on a different computer where there may not be a J drive, and so the browser cannot find the specified image in that location. The solution is to provide the relative address in the SRC attribute. Since your floppy does contain a subdirectory with the correct image in it, simply do the following:  This way, the browser searches for the subdirectory images in the working directory (which is where your HTML document is placed). Look at the following code and output and try to find out what the BORDER attribute and the  tag do: 







   







 While on the topic of images, we can use them for the document�s background. The  tag has the BACKGROUND attribute, which can be set to point to an image, thus setting it to be the background. For example, we have a file called Space.jpg. When we double click it this is what we see: Now let�s set this file to be our background: 











 Problem 7: (1.5 point) It is possible to �borrow� images from other web pages. Since these images may be copyright material we may not use them for any commercial purposes, but we can use them for personal purposes. We can right-click on an image and choose the Save Picture As option (or Save Background As if it�s the background we�re interested in). Surf the web and find some images of your hometown or home country. Using the  tag and other elements build a web page that introduces and describes your hometown or home country. Save your file as home.html. Links When we defined a web page way back in the beginning of this lab, we claimed it contains links to other documents. This is done using the  tag with its HREF attribute. We can use both text and images as links, as shown in the next example: 





This following picture will take you to the 
Star Trek website:





 If you want to add a link that would automatically send e-mail to a specific address you need to follow this pattern, exchanging email@sjsu.edu with the correct address you need. email@sjsu.edu Problem 8: (2 points) Using all the tools you know by now, link all your pages together. Build a web page called index.html from which you will use text and/or images as links to the previous pages you built - movieQuotes.html, yummyFood.html, hello.html, favorites.html and home.html. Make sure to use descriptive text and proper images for your links. Also, add your name and your e-mail address (using mailto) at the bottom of the index.html page. Applets And here is where all this connects to Java. A Java applet is a Java program that runs when you view a web page that has an  or 
   : COLOR, FACE, SIZE 
 - 
: ALIGN  
: ALIGN, COLOR, SIZE, WIDTH   : ALIGN, ALT, BORDER, HEIGHT, SRC, WIDTH 
 
 
: ALIGN : NAME, VALUE 
  : ALIGN, BORDER