Sie sind auf Seite 1von 7

Page 1 of 7 Learning Basic HTML to support a Java Applet Name: ____________________________ Instructions: Attached to this worksheet is a handout describing

basic HyperText Markup Language (HTML). This document is not designed to make you an expert in HTML. The full use of HTML is beyond the scope of this class. However, you are expected to understand the basic HTML structure/commands that are necessary to support the creation and publishing of a Java applet. You will print and submit in class only the first two pages. The remaining pages are for you to study.

Use the information contained in this packet to complete the worksheet. 1. What does the abbreviation HTML mean?

2. According to the document below, learning HTML involves 2 tasks. What are they?

1.

2.

3. What are tags?

4. What two characters surround a tag?

5. What character symbolizes that the tag is a closing tag?

6. What type of editor is used when creating a Web page with HTML commands? 7. What three files must a Java programmer create when developing a Java applet?

Page 2 of 7 1. 2. 3.

8. What are the HTML tags needed to embed a Java applet in a Web page?

9. Which files must be copied to the Web in order for the Java applet to display properly? Hint: The first file that must be copied is the Web page.

10. What does the abbreviation URL mean? What is the definition of a URL?

11. I have a Web page named Welcome.html. If I wish to embed a Java applet called HelloWorld in this Web page, with a with of 300 and a height of 45, what would the syntax of the HTML applet tags be? Assume the class file has been copied to your CBU Web space.

12. What additional HTML tag must be included between the beginning <applet> and closing </applet> tags that indicates where the class file is located?

Page 3 of 7

What is HTML ?
HTML (hypertext markup language) is the computer language that is used to create documents for display on the Web. Many editors exist to create Web Pages Word, Excel, PowerPoint, FrontPage, DreamWeaver, and GoLive are just a few. Nevertheless, each of these software programs (editors) performs the exact same task they all generate HTML language. The HTML language consists of a series of HTML tags. Learning HTML involves finding out what tags are used to mark the parts of a document and how these tags are used in creating an HTML document. Tags are instructions that tell your browser what to show on a Web page. They break up your document into basic sections. All tags start with a < (left bracket) and end with a > (right bracket).

What is a text editor ?


A text editor is any program that saves the text characters you type, but does not save additional information about the formatting of the page. Recall the in-class example where two files were created: (1) one in MS Word, and (2) one in MS Notepad. The word Hello was saved in each document. You were told in advance that each character requires 1 byte of storage space. The file created in MS Word required 19,000 bytes (19 Kilobytes) of storage space. The file created in MS Notepad required only 5 bytes (1 byte per letter). The reason for the difference is that MS Word saved information about the page formatting in the hello.doc file. MS Notepad saved only each character typed into the document in the .txt file. You will use text editor Microsoft Notepad to design a Web page. This involves opening Notepad, typing the required HTML tags in addition to the content of your Web page, and then saving the Web page with a name that ends in .html (for example Welcome.html). Naturally, you must copy the file you create to your Web space before it will be visible on the Internet.

Page 4 of 7

HTML body tags (necessary to form the structure of a Web Page)


The first tags you will learn are those that are necessary to begin and end the HTML document. When your Web browser encounters these tags, it knows to display the document as a Web page. <HTML> = Begin HTML page </HTML> = End HTML page Notice that the first tag starts with the less than symbol, includes the words HTML and then ends with the greater than symbol. Thats all there is too it! Thus, the document begins. Notice that the Ending tag also has a forward slash. The use of the forward slash is commonly used to signal a stop or closing point. All the other HTML tags go between these two tags. For example, if you want to give your Web page a title: Introduction of Phillip Zwass the appropriate HTML tag is used between the <HTML> and </HTML> tags as follows: <HTML> <TITLE> Introduction of Phillip Zwass </TITLE> </HTML> So, youve learned another tag. The <TITLE> tag. Note that HTML isnt as picky as Java. The title does not go inside quotes. Rather, the tag understands that the following content will be text. Like other HTML tags, TITLE has an opening <TITLE> and closing </TITLE> tag. The text appearing between these two tags will appear in the title bar of the Web browser when your Web page is displayed. But now, you want to write the main content of your Web page the body. You want to tell people about your company or a product you are selling. To do this, you need to use the BODY tags. The beginning <BODY> tag is located underneath the title tag. You type the tag, then the main message of you want to convey. Then, you close the body with a closing tag as shown below: A basic Web page requires the use of all the tags below. (In assignment #12, you will create a Web page using the following basic form). NOTE THE PLACEMENT OF THE TAGS VERY IMPORTANT! <HTML> <TITLE> Introduction of Phillip Zwass </TITLE> <BODY> My name is Phillip Zwass and I am a Senior Electrical and Computer Engineer at Christian Brothers University in Memphis, Tennessee. My work experience includes an internship at ABC Corporation where I wrote Web pages describing key products and services provided by the company. </BODY> </HTML>

Page 5 of 7

HTML formatting tags


Other HTML tags enable you to format your Web page. Simply insert the tags around the words you want bolded or italicized or underlined. <B> begin bolding text <U> begin underlining text <I> begin italicizing text <CENTER> begins to center text </B> stop bolding text </U> stop underlining text </I> stop italicizing text </CENTER> stop centering text

This is the extent of the HTML formatting tags that we will learn. If you wish to learn additional HTML tags including how to insert an image, display background colors, etc a very good tutorial on HTML tags can be found at: http://www.geocities.com/Baja/4361/htmlcode.html and a good tutorial on inserting images can be found at: http://www.geocities.com/Baja/4361/imagine.html . A final recommendation includes: http://www.lissaexplains.com/html.shtml. Let me emphasize, you are only responsible for, and we will only be discussing the HTML tags included in this document. Note: HTML is not case sensitive. Tags are often typed in upper case so that they can be quickly located.

An example of the Bold Tag: To bold a web page, this is what you do. First, decide where you want to bold your text. For instance, in the short story below, I want to bold from the text as shown below: " This is the story of a Java applet. This applet is easy and fun. It is my favorite program in the world! " The HTML code is shown below.

<HTML> <TITLE>Sample Web page without embedded Java applet</TITLE> <BODY> This is the story of a Java applet. <B>This applet is easy and fun </B>. It is my favorite program in the world! </BODY> </HTML>

Page 6 of 7

HTML tags necessary to embed Java Applets


Before starting this section, view the Web page: http://www.cbu.edu/~jmcgrory/ECE112.html . The moving picture on the Web page (a still photo is shown below) is a Java applet.

I named the applet ECE112.class. (Naturally, the source code was named ECE112.java). I copied the class file to my WWW folder just like a Web page. This will be important. So, we know now that Java applets require 3 files: The Java source file The Java class file The HTML file with the Java class embedded The Web page knows to display the Java applet because of the HTML code. Specifically, a special applet tag <applet> and </applet> is used to embed the Java applet on the HTML page. In addition to simply displaying the Java applet, notice that the ECE112 class (also known as the java applet) is contained within a certain height and width. These are parameters of the <applet> tag that must be included when you write the HTML code. One more tag is needed to make the Java applet viewable from any computer on the Internet. You must insert one more parameter that tells the Web page the location of the Java applet. This tag is the <param name> tag, which simply indicates a parameter. Note that the <param > tag is placed between the <applet> and </applet> tags. THE PLACEMENT OF HTML TAGS IS VERY IMPORTANT. The code comes together as shown in the example below. This example shows the use of the applet and parameter tag to display a java applet. Pay close attention to the use of symbols like quotes, <, >, and = <applet code="ECE112.class" width="550" height="130"> <param name="WEBLINK" value="http://www.cbu.edu/~jmcgrory"> </applet> Note: HTML is not case sensitive. Tags are often typed in upper case so that they can be quickly located.

Page 7 of 7

The COMPLETE code


The complete HTML code necessary to display a Java class (namely an applet), where the class is named ECE112.class and has been previously copied to the WWW folder is as follows: <HTML> <TITLE>Sample Web page including embedded Java applet</TITLE> <BODY> <applet code="ECE112.class" width="550" height="130"> <param name="WEBLINK" value="http://www.cbu.edu/~jmcgrory"> </applet> This is a story of a little man. <B>This man is a very nice and is also a good man. He is one of my favorite man in this world.</B> he is one of my favorite man in this world.

</BODY> </HTML>

NOTE THE ORDER OF THE HTML TAGS!!!! THIS IS VERY IMPORTANT!

What is a URL ?
The acronym URL stands for "uniform resource locator." It's the standard address that can take you to a document, or a specific place on a document, anywhere on the WWW. The URL for CBU is http://www.cbu.edu . Your personal URL is http://www.cbu.edu/~yourloginname

Das könnte Ihnen auch gefallen