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.
- Java Incorporation
- JavaScipt
- Cascading Style Sheets (CSS)
- ActiveX
- Plug-ins
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 Tag | End Tag |
| Is it needed? | required | required |
| How it looks: | <applet> | </applet> |
| What it does | Allows you to insert a Java applet into the webpage. |
| Attributes:Name | Values | What 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 values | Controls the height of the applet. It is required. |
| width= | pixel values | Determines the width of the applet. It is required. |
| mayscript | none | Allows the applet to access JavaScript values. |
| name= | a name for the applet | Defines a name for the individual applet, for internal
uses. |
| codebase= | name of directory that hold the applet file | Similar to entering a path for the
file. |
| alt= | a message | Alternate 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 Tag | End Tag |
| Is it needed? | required | required |
| How it looks: | <param> | </param> |
| What it does |
Allows you to define values for that particular applet. |
| Attributes:Name | Values | What it does |
| name= | a name | This is a name which allows the applet to use the value. |
| value= | acceptable Java variables | A value that will be used by the applet. |
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 Tag | End Tag |
| Is it needed? | required | required |
| How it looks: | <script> | </script> |
| What it does | Allows you to insert JavaSCript code into the webpage. |
| Attributes:Name | Values | What 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. |
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 Tag | End Tag |
| Is it needed? | required | required |
| How it looks: | <style> | </style> |
| What it does | Allows you to insert style sheet information directly into the webpage. |
| Attributes:Name | Values | What it does |
| type= | text/css | Tells 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 Tag | End Tag |
| Is it needed? | required | forbidden |
| How it looks: | <link> | none |
| What it does | Allows you to use external style sheets in your page. |
| Attributes:Name | Values | What it does |
| rel= | stylesheet | Tells the browser this is a style sheet file. |
| type= | text/css | The stylesheet type is CSS. |
| href= | file name (ends in .css) | The name of the CSS file to be used. |
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 Tag | End Tag |
| Is it needed? | required | required |
| How it looks: | <object> | </object> |
| What it does | Allows you to insert a Java applet into the webpage. |
| Attributes:Name | Values | What 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 values | Controls the height of the applet. It is required. |
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 Tag | End Tag |
| Is it needed? | required | required |
| 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
|