HTML: Script Tag

Author: Ronald S. Holland
at
Total Application Works




To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2012 All Rights Reserved Total Application Works


    Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
    <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Script.html">
    Script Tag </a>
    </table>
    </body>
    </html>


Introduction

The purpose of this tutorial is to show you how to write a HTML page, using scripts. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. Scripts offer authors a means to extend HTML documents in highly dynamic ways. For example, scripts may:

  • Be evaluated as a document loads to modify the contents of the document dynamically.
  • Accompany a form to process input as it is entered. Designers may dynamically fill out parts of a form based on the values of other fields. They may also ensure that input data conforms to predetermined ranges of values, that fields are mutually consistent, etc.
  • Be triggered by events that affect the document, such as loading, unloading, element focus, mouse movement, etc.
  • Be linked to form controls (e.g., buttons) to produce graphical user interface elements.
There are two types of scripts authors may attach to an HTML document: Those that are executed one time when the document is loaded by the user agent. Scripts that appear within a SCRIPT element are executed when the document is loaded. For user agents that cannot or will not handle scripts, authors may include alternate content via the NOSCRIPT element. Those that are executed every time a specific event occurs. These scripts may be assigned to a number of elements via the intrinsic event attributes. In the following example, we will show you the code for our HTML page, using scripts.

How to use a script in a HTML page

The <script> tag is used to define a client-side script, such as a JavaScript. A client-side script is a program that may accompany an HTML document or be embedded directly in it. The program executes on the client's machine when the document loads, or at some other time such as when a link is activated. HTML's support for scripts is independent of the scripting language. The script element either contains scripting statements or it points to an external script file through the src attribute. The required type attribute specifies the MIME type of the script. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. See Figure 1 for an example.



<html>
<body>
<script type="text/javascript">
document.write("Hello World!<br><br>from <br><br>")
document.write("Ronald Holland <br><br>@ <br><br>Total Application Works")
</script>
</body>
</html>
Figure 1: Example of a Hello world script


  1. <html> - indicates the beginning of the HTML page
  2. <body> - indicates the beginning of what will be displayed on the user's screen
  3. <script> - defines the start of a client-side script, such as a JavaScript.
  4. document.write - prints the specified text to the page.
  5. </script> - indicates the end of a client-side script.
  6. </body> - indicates the end of what will be displayed on the user's screen
  7. </html> - indicates the end of the HTML page

Example 2: How to use a script in a HTML page

An example of a more robust web page, with a client side script, looks like:

<html>
<head>
<title>
This an example of a more robust web page
</title>
<script type="text/javascript">
function sendMsg() {
alert("Page is loaded\n\nFrom\n\nRonald Holland\n\n@\n\nTotal Applications Works");
}

</script> </head>
<body>
</body onload="sendMsg()">
<h1>Hello World!</h1> </html>
This an example of a more robust web page

Hello World!

Figure 2: HTML Example of a more robust web page


  1. <html> - indicates the beginning of the HTML page
  2. <head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.
  3. <title> - he TITLE of your page. This will be visible in the title bar of the viewers’ browser.
  4. </title> - Ends the HTML <TITLE> tag.
  5. </head> - Ends the HTML <head> tag.
  6. <body> - indicates the beginning of what will be displayed on the user's screen
  7. </body> - indicates the end of what will be displayed on the user's screen
  8. </html> - indicates the end of the HTML page

Example 3: How to use a Button

An example of a more robust web page, with a client side script, looks like:

<html>

<head>
<title>Programming Resource </title>
</head>
<body>
<form>
<input type=button onClick="location.href='http://www.sumtotalz.com/TotalAppsWorks/ProgrammingResource.html'" value='Programming Resource'> </form>
</body>
</html>
Programming Resource
Figure 3: How to use a Button


Required Attributes

Attribute Value Description
type MIME-type Specifies the MIME type of a script

Optional Attributes

Attribute Value Description
charset charset Specifies the character encoding used in an external script file
defer defer Specifies that the execution of a script should be deferred (delayed) until after the page has been loaded
src URL Specifies the URL of an external script file
xml:space preserve Specifies whether whitespace in code should be preserved


Standard Attributes

The <script> tag does not support any standard attributes.


Event Attributes

The <script> tag does not support any event attributes.










HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2012 All Rights Reserved Total Application Works