Victoria University
 return to Hypermedia

HEB0074
Human Communications Technologies

Welcome to the Lesson on Revising HTML and Introducing JavaScript

Class Agenda

 

1

 Work for today. This is Pure Revision So Let Us Do it very Quickly
Open Up Note Pad ( Look in the Start Menu)

2

 save the file as index.htm in a new Folder you will create called HTML in the My Documents folder

3

 Copy and Paste the following into the file

<html>
<head>
</head>
<body>
</body>
</html>

save it

4

 Between the head tags type <title>My First Page</title>

5


Between the body tags type  Hello World
save 

6

 Open (or go to ) Netscape , open a new Navigator Page, Select New Page, Choose file and browse to My Documents pick index.htm and open the page .
What do you see ? 

7

 We will spend some time entering other tags into this document. Then we will open our finished document up in Arachnophilia and then in FrontPage

8

 Headings <h1> </h1>

9

 Text Style  <i> </i> <b> </b>  <blink> </blink>

10

 Links <a href="(address or file)">Name of link</a>

11

 Images <img src=" name and address of image">

12


Centering <center> </center>

13

   Colours {Colors} <body bgcolor="#........."text="#......." link="#......." alink="#......." vlink"#......">

Hexadecimal codes of colors

000000 = black
FFFFFF = white
FF0000 = red
0000FF = blue
FFFF00 = yellow
5C3317 = brown

14

 Lists <ol>
       <li> sandwiches
       <li>hot dogs
        <li>souvlaki
         <li>soup
     </ol>

Now change <ol> </ol>  to <ul>  </ul>

15

 Extras  <hr>  hard rule <p> start a new paragraph or skip a line .

16

With some HTML under your belt it is now time for da dah  JavaScript

17

 Entry the basic tags to create a page ( NB  remember you can cut and paste)

<html>
<head>
</head>
<body>
</body>
<html>

18

 Now for JavaScript, between the Head Tags place this set of tags,

<script language=JavaScript>

function main()
{
}

</script>

This tells the browser that you will be using JavaScript and that you will be running a function and the name is "main"

You have not got anything between the brackets though so you have not entered the function yet.

19

 Now in the body tags you write 

<script language=JavaScript>main();</script>

This tells the browser to run "main" at this place  on the page.

20

 Now save this as a page you can open again , a sort of template, so call it template.htm.( put in a new folder in My Documents)

21


Now we will use the age old computer programmers first lesson , teaching the computer to say "Hello World"

Open up you template in Note pad, save the document as first.htm (same place)

Place the tag <title> My First Program</title>
in the head tag  above the script tag.

22

 Now insert the following so that your page looks like this
{
document.write("Hello World");
}

 

23

 Between the body tags , but above the script tags write
<h2>My First Program</h2>

24

 save your work and open up Netscape and lets have a look. Cool eh?

To revise last weeks work , enter some more tags .

How do you think you could give tags to change the appearance of  "Hello World" ?

25

 Now for the hard part

variables , we can ask the program to write on the screen pretty much what we like, it will also allow us to use some short hand by declaring a variable          (an object that can change)

so go back to your template and open a new document , call it second.htm

and between the {  } brackets write

var name;
var age;
name="Peter";
age=21;
document.write(name);
document.write(" is ");
document.write(age);
document.write("<br>");

name="Jason";
age="54";

document.write(name+" is "+age+"<br>");

save and look at it in Netscape

 

26

  Now is that great? Yes ? No?  But wait there is more...

Prompt

When you declare a variable like age or name you can let the user decide , this is called user input.

make a copy of second.htm ( use save as ) and call it third.htm

Now change the the script so it looks like this 

var name;
var age;
name=prompt("What is your name","Denzil?");
age=prompt("What is your age","7?");
document.write(name);
document.write(" is ");
document.write(age);
document.write("<br>");

name="Jason";
age="54";
document.write(name+" is "+age+"<br>");

save that and look at it in Netscape.

27

 Now it is your turn .  I have created a function called main() , it can be any name eg name() and country () 

so to make a function that will print on the screen the user input of their name I will use

function name()
{
var name;
name=prompt("What is your name?","Denzil");
document.write(name);
}

You write one for country and then put them into your script ( in the body tags) so that the sentence 

My name is Denzil and I live in the USA

is written with the person being able to user input a name and a country