Teachers Name 
peter.thomas@vu.edu.au

 Lesson Two 
HEB0075 Interface Design

Resources and Downloads  
Back to Front Lesson Two 

 

This Lesson may continue for the next 2 weeks due to School Partnerships and class progress.
We will divide it into HTML and JavaScript

Lesson for today

  

1

 Check Uni Student Email Account -- This is where you will send today's discussion  to me at peter.thomas@vu.edu.au

2

 Reading for the week.  Feed back and discussion.  Lets examine Jakob Nielsen's Site , the famous http://www.useit.com/ and his Alert Box column

3

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

4

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

5

 Copy and Paste the following into the file

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

save it

6

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

7


Between the body tags type  Hello World
save 

8

 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 ? 

9

 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

10

 Headings <h1> </h1>

11

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

12

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

13

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

14


Centering <center> </center>

15

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

Hexadecimal codes of colors

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

16

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

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

17

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

18

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

19

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

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

20

 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.

21

 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.

22

 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)

23


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.

24

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

 

25

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

26

 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" ?

27

 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

 

28

  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.

29

 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

30

 Now to be an effective Digital Portfolio EntryYOU need to show your ability to handle this new knowledge. Your work should reflect your content  so that it shows me and YOU that you have grasped the tags and scripting so far .
   

31

 Reading for next week is to open up the Task Centred User Interface Design book and read Chapter One

 

to the top

 

 Resources and Downloads

  

Script Sites  

Design

Downloads
Web Teacher
 On-Line shareware texbook
Task Centered User Interface Design		 A tool to use in place of FrontPage
Arachnophilia
On Using HTML
 Web Style Guides
  
A Forms Tutorial    
A primer on Using HTML from the NCSA    

to the top