Department of Computer Science | San Jose State University
Lab 3: HTML and Java Applets
The Internet is a vast and useful source for information and communication. We visit websites to find information about our favorite celebrities. We send silly jokes to our friends through e-mail. We research our term papers through Google and the SJSU Library website. We even register for classes online. This sea of information is arranged in individual web pages, the basis for which lies in HTML. In addition, a special kind of Java program, the Java applet, can be combined with HTML to create a Java program that runs inside the web browser.
In this lab we will learn the basics of HTML and how to build a web page. At the end of this lab you will be asked to submit your own web page, which will include links, images and applets, so make sure to start your sense of creativity working now.
But before we start, there are some terms we need to define:
Definitions:
▪ Web Page: a web page is called a hypertext document since it contains not only text and graphics but also links. A link is any element (text, image etc), which leads to another web page when it is clicked by the mouse.
▪ HTML: Hyper-Text Markup Language. HTML is the formal language with which we control the flow and layout of our web page’s content. It is important to note that HTML is not a programming language but a collection of tags and instructions that surround the elements of our web page.
▪ URL: Universal Resource Locator. Every file that can be processed by a web browser must be identified by a unique URL, just like every house and apartment is identified by a unique address and a unique phone number. The URL is in fact the “address” of the file. For example, the URL, or web address, for the Computer Science department website at SJSU is:
The http stands for Hyper Text Transfer Protocol. Web servers use this protocol to send pages to your computer.
▪ Web Browser: a program that generates a web page from an HTML file. The two most popular browsers are Internet Explorer and Netscape.
▪ Web Server: a computer running a program that listens for requests from web browsers for HTML files. Usually these requests include the file’s URL.
▪ Element: anything that might be contained in a web page, including text, images, links, tables, applets etc.
▪ Applet: a Java program embedded in a web page. While a Java application runs in a console window (DOS command prompt, for example), a Java applet runs inside the web browser. Java applets are in such great use that most web browsers have a Java virtual machine already built in.
▪ WWW: World Wide Web. This is the vast collection of all web pages available on the Internet. And there are lots of them out there.
Ok, now that we know all the terms, let’s get to work. If at any point during the lab you encounter a term you’re not familiar with, try to see if it’s defined above.
Everyone has a web site, why not you?
When surfing the World Wide Web we find web pages that belong to all sorts of entities. Companies have web pages (usually with a .com suffix), colleges, universities and other educational bodies have web pages (usually with a .edu suffix) and government agencies have web pages (with a .gov suffix). In addition, many people have their own personal web pages, where they share their family photos, life stories, hobbies and more. Though there are tools and programs one can use to build a web page without knowing HTML, building a web page “from scratch” using nothing but HTML has its advantages. Not only do you have more control and a wider range of possibilities in designing your web page (you are not limited to the software’s capabilities) but it also sounds so much more impressive when you say “I built my web page by coding HTML.” If, however, you find a better line to impress others, stick with it.
HTML is not very hard to learn either. In fact, let’s see just how easy it is. Open your favorite text editor (WORD, Notepad, TextPad or any other text editor) and input the following text:
This is soooo easy!!!
Save your file under the name first.html in your working directory. Now look at the content of this directory, find that HTML file and double-click on it (it should open using your web browser). Doesn’t look like a very impressive web page, but we’ll fix that soon enough.
HTML consists of tags – reserved words between the ‘’ characters. Each tag declares the beginning of some action. For example, the tag declares the beginning of the HTML document, and the tag declares the beginning of the body of the document (as opposed to other parts of the document, explanation to follow). Each action will continue from the moment the tag appears in the text until the matching closing tag appears. A closing tag is just like its matching opening tag, only it has a ‘/’ character in it. For example, the tag declares the end of the HTML document. By the way, the convention is to use upper-case letters for the HTML tags, but this is not an HTML requirement. That is, HTML is not case-sensitive.
When you open your HTML file using a text editor, the tags are interpreted as regular text. However, when you open the exact same file using a web browser, the tags are interpreted, the action they define is performed and the tags themselves are not shown as part of the file’s text. But keep in mind, the contents of the file is exactly the same in both cases; the difference is in how each software interprets and displays the contents of the file.
Many tags have attributes, a kind of variables whose value can be changed. For example, the tag has the BGCOLOR attribute, which controls the color of the background. It can be assigned any number of values, such as RED, LIGHTBLUE etc. Go back to your first.html file and change the second line to
Now reload your file. Is the background red? Take a few minutes and experiment with other colors until you find the one you like best.
Some Basic Tags
Ok, let’s go one step further. In order to make our web page a bit more interesting we need to look at some more basic tags (at the end of this lab you will find an index of some basic HTML tags with their more important attributes). Create an HTML file called quotes.html with the following content:
Some Random Movie Quotes
Movie Quotes
Star Wars
May the force be with you!
Luke, use the force.
I am your father
Austin Powers
One Hundred Million Dollars!
Danger is my middle name.
Oh behave...
Now load the HTML file using your web browser. You should see the following (there may be some slight differences, depending on the browser you use):
[pic]
Now let’s compare our text version with web page and try to see what each tag does. We already know what the and tags do. The tag defines the document’s header, as opposed to the document’s body. Anything between this tag and it’s corresponding closing tag would be part of the file’s header.
Problem 1: What does the attribute do? Find the place in your web page where the attribute affects the display of the file. Write your answer in a file called title.txt and save it.
Once we are inside the document’s body we find two similar tags – and . These are heading tags and there are six of them ( through ). Note the difference in the size between the text in the tag and the one in the tag. The header tags can be used with the ALIGN attribute. By stating we tell the web browser to put the text between the opening and closing header tags in the center of the line in the browser’s window. We could also give the ALIGN attribute the values LEFT and RIGHT. If no value is stated, as in our tag a few lines below, the default value LEFT is assigned. It is very important not to forget the closing tag for the header tags. If we forget, for example, to close the tag our entire document would be in large fonts and centered.
Let’s do an experiment. Go back to your quotes.html file and remove the closing tag . Now reload your file. A bit of a mess, right? Change it back. By the way, we encourage you to experiment with deliberately omitting closing tags, just to see what happens. It’s by far the best way to learn the function and importance of the various HTML tags. Go wild.
The tag declares the beginning of a new paragraph. That means your browser will make sure to leave one or two blank lines before continuing. The closing tag, , can be used to denote the end of a paragraph. However, you can completely ignore the closing tag, since declaring a new paragraph with the tag means that the previous paragraph has ended.
Problem 2: Here’s a pop quiz for you. What do the and the tags do? Write your answer in a file called pop_quiz.txt and save it.
Problem 3: Make a web page of your favorite movie quotes of all times, including the name of the movie they are taken from.. Feel free to use the file quotes.html as a template if you want. Make sure to choose a cool color for the background and try to make the page look as interesting as you can. Save your file under the name movieQuotes.html.
A few words about formatting
Like Java, HTML ignores white space. We can have our file formatted in a certain way when viewed in our text editor. However, since line breaks and new paragraphs are determined by the web browser according to the proper HTML tags our file can be written all in one paragraph, without return characters:
Some Random Movie QuotesMovie QuotesStar WarsMay the force be with you!Luke, use the force.I am you fatherAustin PowersOne Hundred Million Dollars!Danger is my middle name.Oh behave...
Though the web browser will display the exact same output, for the sake of readability you should follow a more readable pattern.
While on the subject of readability, you may want to comment your HTML code. For example, if you are using tags that are not very popular and familiar, or if you are imbedding Java applets or JavaScript commands into your web page, you may want to enter some comments to explain your code, just like you do in your Java programs. To enter a comment in your HTML file use the following format:
...
...
Here are some useful tags for layout control: , , , , , 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
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.
[pic]
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: 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 tabs characters (  inserts three non-breaking white spaces). That would make life kinda hard:
Hello World
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:
Hello World
public class Hello
{
public static void main(String[] args)
{
System.out.println("Hello World");
}
}
In both cases the result is exactly the same:
[pic]
Problem 5: 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, dark blue 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 and Don't Like Eating
What I Like Eating
Pizza
Steaks
Milk Chocolate
What I Don't Like Eating
Fish
Sour Cream
Dark Chocolate
[pic]
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
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
[pic]
Problem 6: 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.
Look at the following code and output and try to find out what the BORDER attribute and the tag do:
Some Aliens and Monsters
   
[pic]
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:
[pic]
Now let’s set this file to be our background:
Space, the Final Frontier
>
[pic]
Problem 7: 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:
Links
This following picture will take you to the
Star Trek website:
[pic]
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: 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 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 tag embedded in the page. This is very useful, since we can put Java programs on the web and create some fun interactive graphics. Older versions of HTML used the tag, which is now deprecated and replaced by the tag. This tag allows us to specify the location of the .class file we want to run and the height and width of our applet inside the page. In addition, we can specify the values of various parameters we have inside our applet and give alternate HTML code, in case the browser does not support applets.
Let’s look at a simple example. First, here is the HTML code:
Life, the Universe and Everything
This applet presents the main point of the six-book trilogy
(yes, six-book trilogy) The HitchHiker's Guide to the Galaxy by the very funny Douglas Adams :
Oops, your browser does not support applets.
Now here’s the .java file:
/**
This class defines an applet.
@author me
@version 1.0
*/
import java.applet.Applet;
import java.awt.Color;
import java.awt.Graphics;
public class HitchHiker extends Applet
{
public void start()
{
red = (Integer.valueOf(getParameter("RED"))).intValue();
blue = (Integer.valueOf(getParameter("BLUE"))).intValue();
green = (Integer.valueOf(getParameter("GREEN"))).intValue();
answer = getParameter("ANSWER");
showStatus(answer);
}
public void paint(Graphics g)
{
g.setColor(new Color(red, green, blue));
g.drawString(answer, 20, 55);
}
// instance fields:
private int red = 255;
private int green = 0;
private int blue = 0;
private String answer;
}
Once you compile the .java file and you have both a .class file and an HTML file referencing this .class file you can run the applet. If you are using TextPad you can choose the Run Java Applet (CTRL+3) from the Tools menu. Either way, you can simply double-click the HTML file and view your applet. And here is the result you should get:
[pic]
Problem 9: Create an applet of your choice. Feel free to use the above example as a template. Save the applet in the files CoolApplet.java and coolApplet.html, and make sure to add a link from your index.html page to the coolApplet.html page.
Lab submissions:
Submit a floppy disk to your lab instructor with the following files Do not submit any .class files):
1. title.txt
2. pop_quiz.txt
3. index.html with links to the files in #4-9
4. movieQuotes.html
5. yummyFood.html
6. hello.html
7. favorites.html
8. home.html
9. coolApplet.html
10. CoolApplet.java
Appendix: HTML Tag Index
▪
o HREF
▪
▪
▪
o BACKGROUND
o BGCOLOR
▪
▪
▪
▪
▪
o COLOR
o FACE
o SIZE
▪ -
o ALIGN
▪
▪
o ALIGN
o COLOR
o SIZE
o WIDTH
▪
▪
▪
o ALIGN
o ALT
o BORDER
o HEIGHT
o SRC
o WIDTH
▪
▪ (or )
o CODE
o HEIGHT
o WIDTH
▪
▪
o ALIGN
▪
o NAME
o VALUE
▪
▪
▪
o ALIGN
o BORDER
▪
▪
▪
▪
▪
▪
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- list of computer science topics
- benefits of computer science degree
- history of computer science pdf
- fundamentals of computer science pdf
- benefits of computer science career
- benefits of computer science education
- doctor of computer science salary
- examples of computer science math
- list of computer science journals
- examples of computer science projects
- list of computer science careers
- san diego state university virtual tour