HTML Is Your Friend/ pg. 16

CHAPTER 13: JAVA, JAVASCRIPT, CSS, ACTIVEX, & PLUGINS

You must know by now about the limitations of HTML. For the most part, by itself, HTML is very static. There are very few interactive elements native to HTML. Motion is almost inachievatble, except for the occasional animated GIF. Forms are interactive, but require other programming. So how do you incorp ate them? With a few little tags! Of course, you'll still have to program the applets you want to use.

  1. Java Incorporation
  2. JavaScipt
  3. Cascading Style Sheets (CSS)
  4. ActiveX
  5. Plug-ins


Incorporation of Java

Putting Java applets into your webpage is easy. You only have to use a simple tag, the <applet> tag. There is another tag you can use for parameters of the applet, the <param> tag, but that's optional. There are a few attributes for the <applet> tag, which are simple to use.
      First we have the code= attribute. It acts very similar to the famil r src= attribute; you put the name of the file that contains the Java applet, typically with the extension ".class".
      Next there are the height= and width= attributes. Values are in pixels, and they do exactly what they're named for.
      How do you use Java and JavaScript together? Use the mayscript attribute in the <applet> tag. This value-less attribute allows the applet to use JavaScript values.
      Our fourth attribute is the name= attribute. This name is optional, but is used for internal use. erhaps there are applets that interact with each other and need to know the other bye name. That is what this attribute allows you to define.
      The codebase= attribute is optional, but useful. This attribute is the name of the directory wehere the .class file is located. It makes it a bit easier to locate the applet.
      The alt= attribute is familiar. You enter, after quota on marks, a string of text you want displayed if the browser cannot use Java. Another attribute similar to ones for the <img> tag is the align= attribute. The usual values of left, center, right e used. This specifies the alignmnet of the Java applet.

The <param> tag is used within the start and end tag of the <applet> tag; the <param> allows you to account for any parameters that the applet should use. There are only two a ributes for the <param> tag, the name= and value= attributes. The name= attribute allows the applet to use value that is specified in the value=Another thing you place in between the <applet> tag and end tag is content for people without Java capable browsers. is is similar to the <noframe> tag. The content can be image tags, text, links, et cetera. Be sure to include this, or your reader will be annoyed (I know I'd be).

Quick Information: <applet>
Start TagEnd Tag
Is it needed?requiredrequired
How it looks:<applet></applet>
What it doesAllows you to insert a Java applet into the webpage.
Attributes:NameValuesWhat it does
code=file name (ends in .class)Similar to the src= attribute. It defines the source file of the applet to be displayed. This is required.
height=pixel valuesControls the height of the applet. It is required.
width=pixel valuesDetermines the width of the applet. It is required.
mayscriptnoneAllows the applet to access JavaScript values.
name=a name for the appletDefines a name for the individual applet, for internal uses.
codebase=name of directory that hold the applet fileSimilar to entering a path for the file.
alt=a messageAlternate text to be displayed by non-Java browsers.
align=left
center
right
Defines the alignment of the applet, similar to that of an image.
Quick Information: <param>
Start TagEnd Tag
Is it needed?requiredrequired
How it looks:<param></param>
What it does Allows you to define values for that particular applet.
Attributes:NameValuesWhat it does
name=a nameThis is a name which allows the applet to use the value.
value=acceptable Java variablesA value that will be used by the applet.


JavaScript

JavaScript is a wonderful language that can produce much more interaction and dynamic affects than HTML could ever dream of. So how do you incorporate this versatile language? By using the <script> tag, silly!
      The <script> tag is easier to use than the <applet> tag. For one thing, there are two ways to incorporate JavaScipt code into your HTMl file. u can either place the JavaScript code between the <script> tag and its endtag, or you can link to a seperate file that contains the code.
      But first let's talk about attributes. There are only two here, the ont face=courier>language= attribtue and the src= attribute. The language= attribute allows you to specify to the browser that you are using JavaScript as your scripting language. This attribute as introduced in anticipation of scripting languages to come. But right now, all you have to do is put in the value "javascript". The src= attribute allows you to link to a different file that contains the JavaScript code. If y do decide to outsource, the filename should end in the extension ".js".
      But what if you don't want to outsource and want to include the JavaScript statements along with the rest of the HTML? Well, you put the code in between the start and end tag of the <script> tag, like so:

<html>
<head></head>
<script language="javascript">
<!--
alert ("This will open us a little window.")
-->
</html>

If you see, the code comes in between the <script> tag. As you can see, I've also included the code as a comment. This is so that browsers that cannot support JavaScript will disregard the code.
      So now the question is, how do I use that code? Well, I suggest you learn a little bit more about JavaScript.

Quick Information: <script>
Start TagEnd Tag
Is it needed?requiredrequired
How it looks:<script></script>
What it doesAllows you to insert JavaSCript code into the webpage.
Attributes:NameValuesWhat it does
language=scripting language name
(default is "javascript")
Just tells the browser what language to execute.
src=file name (extension .js)Allows you to link to a seperate file containing the JavaScript code.


Cascading Style Sheets (CSS)

Wouldn't it be great if you could lay down rules to completely make your page look consistent? Such as having the same font everywhere, the same size, having all horizontal rules at 80%, and such. Well, your dreams have come true! With the latest and greatest addition to the HTML 4.0 standard, Cascading Style Sheets. Essentially, you can code in the properties to be displayed for each element, e ry time that element is featured. Style sheets allow you to add consistency to your page.
      So how do you put stylesheets into your page? There are two methods, using the <style> tag or the <link> tag. When you use the <style> tag, you include the style code with all the other HTML code. The <link> tag allows you to link to an external file that has the style code.
      The <script> tag delimits an area of your source code as style information. All the style code goes in between the <style> start tag and its end tag. There is only one attribute for this tag, the type= attribute. The only value avalible at this time "text/css". You would use this tag as shown:

<html>
<head></head>
<script type=text/css>
<!--
DIV {font-family: times new roman}
-->
</script>
<body></body>
</html>
Quick Information: <style>
Start TagEnd Tag
Is it needed?requiredrequired
How it looks:<style></style>
What it doesAllows you to insert style sheet information directly into the webpage.
Attributes:NameValuesWhat it does
type=text/cssTells the browser which type of style language is used.

Next up we have the <link> tag, another way to incoporate style sheets into your webpage. When you use this tag, you must have a seperate file, saved with the extension .css (i.e., stylesheet.css). The <link> tag links o that document. There are three attributes associated with the <link> tag. First we have the rel= attribute. It's value is "stylesheettype=, tells the browser more specifically that this is text/css. And finally we have the href= attribute, whose value is the name of the .css file

<html>
<head></head>
<link rel=stylesheet type=text/css href= "style.css">
<body></body>
</html>
Quick Information: <link>
Start TagEnd Tag
Is it needed?requiredforbidden
How it looks:<link>none
What it doesAllows you to use external style sheets in your page.
Attributes:NameValuesWhat it does
rel=stylesheetTells the browser this is a style sheet file.
type=text/cssThe stylesheet type is CSS.
href=file name (ends in .css)The name of the CSS file to be used.


ActiveX

Now now, don't let SunMicrosystems and Netscape have all the fun. Welcome to the Internet gang Microsoft, with their contender ActiveX. This is an extremely versatile language with capabilities and function similar to Java, but with some added features. So how do you use it, pray tell? With the <object> tag. This tag is very similar to the <applet> tag, and it even has its own lackey tag, the <param> tag (go loyal help is hard to find).
      Firstly we have to talk about attributes. First on the list is the classid= attribute. It simply is the name of the component, which is set by you or the Act eX object. It's not whatever you want. That is handled by the id= attribute. This is similar to the name attribute of the <applet> tag. The id of the ActiveX component is used for internal purpos of other ActiveX components or HTML elelments.
      The height= and width= attributes are well known to you. Values are either pixels or percentages, and both defined their respective dimension of the ActiveX component. Finally, we have the align= attribute, also quite well known.

The <param> tag used by the <object> tag is identical to the one use by the <applet> tag. It serves the same function (it stores values that will be used by the ActiveX component), and it even has the same attribtues (name=, value=).

Quick Information: <object>
Start TagEnd Tag
Is it needed?requiredrequired
How it looks:<object></object>
What it doesAllows you to insert a Java applet into the webpage.
Attributes:NameValuesWhat it does
code=file name (ends in .class)Similar to the src= attribute. It defines the source file of the applet to be displayed. This is required.
height=pixel valuesControls the height of the applet. It is required.


Plug-ins

But what about other great things you want insert into your webpage that don't fall into the previous three catagories? Well, you'll have to <embed> them. That's right. Use the <embed> tag. It's very very similar to the <applet> or lt;object> tags. It even has a <param> tag to go with it.
     There are many types of files you would like to plugin, but this tag handles most of them. As you know, technology moves fast, and the HTML standard might not cover the particular application. When in doubt, check with your webmaster, who is all-knowing... in terms of the Internet. In anycase, the <embed> tag acts like the <img> tag as well. You just put the filename that you want to be displayed into the src= attribute There is also the name= attribute, which you can name the plug-in, which can serve a purpose in JavaScript code. Then there's the dynamic duo of height= and width=.
     And you know about the <param> tag. Check out the specs
above.

Quick Information: <embed> - Plugins
Start TagEnd Tag
Is it needed?requiredrequired
How it looks:<embed></embed>
What it does Allows you to insert assorted plugins into the webpage.
Attributes:Name Values What it does
src= file name It defines the source file of the plugin to be displayed. This is required.
name= a name for the plugin Defines a name for the individual plugin, for internal uses.
height= pixel values Controls the height of the plugin. It is required.
width= pixel values Determines the width of the plugin. It is required.


Now you can add even more richness and dynamic effects to your once bland and boring webpage. Now you can truly say that you know all of HTML. Sniff, I'm so proud of you! Move on to greater techie things, like Java, JavaScript, DHTML, Perl, CGI, ColdFusion, ASP, C, C++ and all those great acronyms! Go on, show off your new-found knowledge, and learn some more, so that you can always show off your tech prowness. Good luck!
Top