Banner
 Home => Uni => MSc degree => Web Technologies Sitemap | What's New | CONTACT ME 
 
Web www.m1cvf.co.uk 

Web Technologies

Week 1 - History of the Web
Week 2 - HTML
Week 3 - HTML and JavaScript
Week 4 - JavaScript Variables and Data Types
Week 5 - Selection
Week 6

Week 1 - History of the Web

Web addresses

http://subdomain.m1cvf.co.uk:80/folder/file.html
http is the communication protocol. It stands for hypertext transfer protocol.
m1cvf.co.uk is the domain of the website and relates to an IP address and sub domain is part of this address. An IP address is associated to the domain name to make it easier to remember. A domain name server lists the domain names to their IP addresses.
:80 - this is a port number and works like a communications channel. There are more than one port that exists so there's 65,480 channels (ports) to send data over a network. 80 is the default for web browsing and is referred to as the listening port as it waits for a connection and then opens another port for the sending of data once an agreement is made to send data on ports between 1024 - to 65,480. This is a handshake. When communication is complete, the second port closes and 80 remains listening.
folder - like any computer, there is a file structure and in the web server, this is the name. / is root and /folder/ is a folder in root.
file.html - This is the file on the server. When there is no file showing, its usually pointing to index.htm, index.html, index.php, default.html, etc. This is set in the settings of the web server so when one goes to http://subdomain.m1cvf.co.uk:folder/, the index file isn't shown in the address bar of the browser.

History of the Web

The web became commercial around 1993 and pages began to appear in 1991 with the creation of the HTML language.
The internet and world wide web are two different things. The internet are a collection of host computer. They are joined in a network. Each host has its own IP address so they can communicate together using a standard communication protocol called TCP/IP. Using this protocol, packets are sent across the network to communicate with pieces of data. The internet is networked using a standard protocol so its so the host computers can "use the same language". If any data was missing, packets are resent, e.g. using a robust protocol. The internet was almost unknown before 1991 and initially restricted to the academic community.
The world wide web is a distributed information system that works on the internet. The WWW has its own protocol for communicating such as HTTP to ensure the data sent is the right type to be displayed by the appropriate document. This is so HTML is displayed as HTML so Internet Explorer for example doesn't try to open a Word document. Links in websites are represented by links to hypertext objects such as an image and by doing so, creates a data structure. These hypertext objects could be on any host computer. It was developed with CERN 1991 for academics to exchange documents.

Growth of the internet

The WWW network has grown from 4 host computers in 1970 to around 2000 million today (2005). As of September 2003, there were 43 million web servers compared to one in December 1990. A web server can hold more than one website.

Key Events

The idea was originated around 1961 and called the Galactic Network. At the time of this, the thought of communicating between computers was quite alien when people only thought of mainframes which is why no one thought many were needed globally! There was a goal to network the world, starting in America through APRANET. It was largely funded by the US Military. Through this, there was the invention of the hyperlink, mouse and Microsoft Windows.

  • This first 4 computers were connected in 1969 on the west coast of the US.
  • In 1970, they connected to the other side of the states creating a network control protocol. This did not resend data when data was lost so later, TCP/IP was adopted which did. It was done using the existing telephone network. This allowed a rapid expansion of other hosts connecting.
  • In August 1972, the first emails were sent over the APRANET.
  • September 1973 saw the addition of satellite links to create a real-time data transmission. This is because data is time stamped and if you transmit data across time zones, you need some way of overcoming this to synchronise clocks across different time zones. There are servers on the net which synchronise computers across the world to send data in real-time.
  • TCP was developed in June 1974 to allow lost data to be resent.
  • July 1975 saw the development of network devices such as routers, switches and hubs.
  • Different sorts of connections types were created beyond HTTP in July 1976 to download files such as FTP etc.
  • In 1977, the research on APRANET closed down to become commercialised.

Week 2

HTML was invented in 1991 and it stands for HyperText Markup Language.
It is a mark up language and the latest version is HTML 4.

Markup Languages

It identifies elements of a page so that a browser can render the page on the computer screen. It does this using tags. Mark up languages are used to format text and information.
HTML is not case sensitive but its good practice to keep all letters the same case. Remember, UNIX servers are case sensitive so bear this in mind with file names. Also remember there will be a syntax error if tags are not closed when they are meant to be though fortunately the browser will still try to display the page as much as possible.

HTML files either have to end in .html or .htm. .htm is a Windows sort of file extension. File names of the home page are usually called index.html.

The page is started with <html> and ends with </html>.
It has a head of the web page starting with <head> and ending with </head>. The stuff in the head is created first before the body of the document. The info in the header generally doesn't get rendered in the display window. The body is marked by <body> and ending with </body> and contents the page contents.

Layout of HTML

<html> 
<head>
<title>heading</title>
</head>
<body>
My contents
</body>
</html>

Headers

Headers are simple form of text formatting. They vary the text size based on the header's level. This is set up in the browser. E.g. View => Text Size in Internet Explorer.
<h1>...</h1> is the biggest heading and <h6>...</h6> is the smallest heading available if you use the default style in the browsers

Justification

Text can be:

Center attribute

Left attribute

Right attribute

This is done by writing <p align="center">. You could put right or left instead of center. Note the American spelling!

Text Styling

Underline: <u>...</u>
Italics: <i>...</i>
Bold: <b>...</b> This is an old version. We now use <em>...</em> or <strong>...</strong>

Linking

Links are inserted using the A (anchor) element. It requires the HREF attribute, e.g. <a href="address">link text</a>
We can create an email link as <a href="mailto:email address">email text</a>
Links can be absolute or relative. An absolute link is http://www.m1cvf.co.uk/uni_msc-web.php but a relative link is uni_msc-web.php. If i wanted to link to a file in a folder below the level of the level the current page, try linking it such as <a href="..index.htm">Home Page</a>. If you want to reference to a folder at a higher level, then do this: <a href="folder/address">link text</a>.

Images

Images can act as anchors as well as not being links. you insert an image using the tag <img src="file name"> src means source. Images can have height and width settings too so it can look like: <img src="images/logo.gif" width="50" height="50">. You should include an alt attribute too since its best practice to allow blind people and people who have turned images off to read a description of the image. This looks like this: <img src="images/gplogo.gif" width="50" height="50" alt="Picture description">
Images can be links and can be done like this: <a href="index.html"><img border="0" src="images/logo.gif" width="50" height="50" alt="picture description"></a>
You can set a background image too. You do this by <body background = "background file">

Formatting Text with <font>

The font element allows you to add colour and formatting to text. The font attributes are color. E.g. <font color="red">Text</font>.
You can fix the size of the font in the design, though this is not good practice: <font size="3">Text</font>. You can make a font one size bigger to the default by doing this: <font size="+1">Text</font>.
The type of font can also be set. Try this: <font face="Arial, Times">Text</font>. It's probably not a good idea to select a font that is not likely to be on other people's computers and remember, not everyone uses Windows and won't have all the fonts a Windows XP user has!!

Special characters, horizontal rule and breaks

You can draw a horizontal line using the tag <hr>. Note: this tag has no closing tag.
If you want a break new line, you can do this by using <br>.
You can insert special characters such as &. This is written by putting &amp;. Others include:

  • < - &lt;
  • > - &glt;
  • © copyright symbol - &copy;
  • quote marks " - &quot;
  • white space - &nbsp;

Week 3 - HTML and JavaScript

Deitel, Deitel and Goldberg - Internet and World Wide Web How to Program: Chapter 4/5 - 4.4 - web consortium validation

HTML continued

Tables

<table border ="1" height="100%" width="100%">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

We can align the contents of the cells using the valign tag, e.g. <td valign="top">. We can set this to other other options such as bottom, baseline, and middle. Baseline aligns the cells along the baselines of the text. Bottom aligns the cells along the bottom of the text.
To set the horizontal alignment, we use the align="left" tag. This can be set as center, left or right. Please note the American spelling.

The coordinates for pictures and text starts at the bottom left of the object (think of a graph). Remember that a web browser starts the site from the top left so this allows for absolute positioning. This means that we can place an object absolutely by having it 10 pixels from the top and 10 pixels from the left side of the browser window.

Colspan - it adds extra "virtual" columns and allow you to merge columns together:

<table border ="1">
<tr>
<td colspan="2">Row 1, Column 1</td>
</tr>
<tr>
<td rowspan="2">Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
 
Row 1, Column 1
Row 2, Column 1 Row 2, Column 2

Rowspan - it adds extra columns and allow you to merge columns together:

<table border ='1'>
<tr>
<td rowspan="3">left</td>
<td>top</td>
<td rowspan="3">right</td>
</tr>
<tr>
<TD>middle</td>
</tr>
<tr>
<td>bottom</td>
</tr>
</table>
 
left top right
middle
bottom

<th> - header cell tag - Like the TD tag, the TH tag is used for a table cell. The TH tag is a bit different to TD whereby it is used when the cell's contents is a table heading, not a data cell so usually used as a heading at the top of a table or as section within a table. It generally seems to render these cells with bold.

<caption> - This tag is put above the table like this: <caption>My table</caption>. You can use align or valign with this tag too.

Colour Safe Palette

It is made up of, RGB, red, green and blue. Each value of RGB are 0-255, in hex, 00 - FF. Blue and green together makes cyan. Blue and red makes magenta. Red and green together makes yellow. We can reduce the amount of colours on a website by using web safe colours. This is because older monitors cannot display all the possible colours. Colours use the codes: 00, 33, 66, 99, CC and FF in the hex code for each element for red, green and blue.

JavaScript

Ways of using JavaScript:

  • Event based programming - this involves using a form, a mouse, keyboard etc. It can be associating a button with a click event. In JavaScript its called a function. In VB.net its called a method.
  • We can write directly to the screen using "Document write". It is on the fly. This could be done using a prompt box where the user can enter some data. At this point, the data has not been placed into the website until the user has entered the data into the site. The end result is static.
  • DHTML - Document Object model - the final way of programming is combining an event handling style with a static style.

It is an interpreted programming language where it is not compiled. Usually JavaScript is activate by placing this into the html:

<html>
<head>
<script>....</script> etc...

In between the script tags lies the JavaScript. this is client side programming. It is the job of the web client to execute the JavaScript.
We can create blocks of codes called functions and can execute these call blocks individually from one file. In programming there's a start and an end to the code and in between the start and end code, there are statements. The start is <script>. The end is </script>.
Statements have a left hand side and a right hand side. The right hand side is evaluated and the result of the evaluation is applied or assigned to the left hand side. e.g. bob = bob + 1
We can also have instructions such as: CALL instruction. We either call something or assign something.
The entire html file is called "document" this means we are referencing to the current web page and called an object. Its like "me" in VB.net e.g. document.write. Document is the object and Write is the method/action or behaviour. It is calling an action to operate on the object. Methods have parameters associated with them. This is a way of passing information. It is defined with using (), e.g. document.write(). Within the brackets is the argument.

Example of a statement: document.write("Hello World");
We can write additional statements on their own lines. However, if we want to write more than one line of text, we can do this:
document.write("<p>" + "Hello" + " everyone" + "</p>");
The plus sign concatenates the p tags and the text together. However, we can simplify it by doing:
document.write("<p>Hello everyone</p>");

Defining a Variable

Variables hold information we can access. Javascript doesn't have any explicit declaration of variable types so its a loosely defined language. It has a variant data type such as a string - "hello", characters - 'c', integer - 322, floats (floating point numbers) - 42.46. Most programming languages, they are declared, e.g. in VB it is Dim variablename as integer. In JavaScript, we don't do this that way. We do this:
var myVariable = "hello";
var says we are making a new variable, myVariable is its name, = assigns it to the right hand side statement."hello" is a string literal. Data types are primitive values and cannot be evaluated to anything else but themselves. We can call myVariable to perhaps appear in a box and will print hello.
We can do this:

<script>
var myVariable = "hello";
document.write(myVariable); </script>

Week 4 - Variables and Data Types

You cannot write methods in JavaScript but they are written for us. They can either return nothing, e.g. void or return some data. We can write the functions though.

Javascript is a scripting language and is run line by line and is interpreted. It breaks if it occurs an error when trying to display the code onto the screen. It invented by Netscape and has nothing to do with Java.

limitations of JavaScript

  • It cannot interact with a database
  • It cannot perform/draw graphics
  • It will not perform IO operations, e.g. read and write to files, although it can create cookies.
  • It does not support networking.

Ways to use JavaScript

  • You can write documents or insert append to existing documents.
  • Change the internal structure of the document object model
  • Create event driven environment attaching JavaScript to part of a document

Event based programming

function helloWorld() {
window.alert("hello world!"};
}

This creates a function where it opens a popup window that states "hello world" on it.

You can run this function for example as a link to call the function:

<a href="javascript helloWorld()">say hello</a>

Dynamic Programming

We can also use say a for loop:

for (i=1;<10,i++) {
window.status = window.status + 1
}

This shows a count with a loop of 10 times and adds a number to the status bar.

JavaScript can be embedded into a web page directly between script tags or it can be imported into a page from an external file:
<script src="myfile.js"></script>

Document Properties

document.title = "New Title of web page";
document.URL = "http://www.m1cvf.co.uk";
document.lastModified;

A popup can be created using window.message(<string>};
A new browser can be opened using: window.open{<url>,<windowName>,<windowAttirbutes>)

Window Properties

window.document
window.status
window.event - whennever a user clicks on a button, moves a mouse, etc, it is monitored and the last event that is occured is stored as window.event.

Overall

A Method must always be part of an object path ie it must have a dot extension: document.writeln(“message”);
A Function is not part of an object and is called directly and usually assigns a value to a variable: number = parseInt(“10”);

Variables and Data Types

A variable is a reserved area of RAM. The amount of memory set aside depends on the data type. Data types are characterised by the range of the values of the variable and the operations that can be performed on them.
JavaScript is a loosely typed language so declarations of type do not exists explicitly when defining a variable, but they do perform according to the rules of the data type after assigning a value of a particularly type to a variable. The variable takes on the data type once a value is assigned.

Variable names

A JavaScript varaible name must start with a letter or underscore ("_") and subsequent characters can also be digits (0-9). JvaScript is case sensitive so letters can include the characters "A" through "Z” (uppercase) and the characters "a" through "z” (lowercase). myVar is not the same as MYvar.

Rules of JavaScript

  • JavaScript is case sensitive (while, While, WHILE are not the same)
  • All whitespace (spaces, tabs) are ignored between tokens
  • Semicolons separate statements (separate lines do the same)
  • Comments to end of line (// this is a comment)
  • Comments between characters (/* this is a comment */)
  • A Literal is any data value that cannot be evaulated to anything but itself (1, 1.1, “1”, ’1’, true, false, null)
  • An Identifier is a name beginning with any ASCII character, _ or $

Data Types

  • Numbers - 42 or 3.14159 (all floating point)
  • Logical (Boolean) values - true or false
  • Strings - "Hello World!"
  • null - a special keyword denoting a null value or ‘no value’
  • character

We can declare a variable like this: var myValue = 10; The data types are auto detected based on how the program is put together. This prints the variables as strings: document.write (myValue + “ “ + myNextValue + “ “ + andTheNext); but this adds the variables together: document.write (myValue + myNextValue + andTheNext);

Evaluation of Assignment Statements - Assignment statements have a left and right side, e.g. LHS = RHS. Programs try to resolve the right hand side of the statement and always tries to evaluate down to a literal. By definition a literal cannot be evaluated anymore.

Mathematical Operations

  • + addition
  • - subtraction
  • * multiplication
  • / division
  • \ integer division
  • % modulus (integer division)

Arithmetic Precedence

  • ( ) parentheses evaluated first
  • ( ( ) ( ) ) nested parentheses evaluated left to right
  • * / \ % evaluated second and then from left to right
  • + – evaluated last and then from left to right

Post Increments and Decrements

n++ increment by 1 same as n=n +1
n -- decrement by 1 same as n=n - 1
n +=1 increment by 1 same as n=n +1
n -=1 decrement by 1 same as n=n - 1
n+=5 increment by 5 same as n=n + 5

We can use these to create a counter.

Variable declaration - Variables can be defined at any time but it is good programming practice to declare them at the top of the script. The variable name can only be declared once within the same block of code but local variables are an exception. Assignments can be made on the same line but the variables must be delcared.

Data conversion

There are two types: implicitly or explicitly.

Implicitly can be when we convert a number into a string. This can be when we want to display a number in a GUI. This is because values displayed on the screen are always strings. e.g.
var number1=12, number2=20;
document.writeln( "The sum is " + number1 + number2 );

The answer turns out to be 1220 because the two varialbes are concatonated together. We can overcome this, if we want to add the characters together by doing:
var number1=12, number2=20;
document.writeln( "The sum is " + (number1 + number2));

Explictly:    
Code Result  
a = parseInt (“1”);
b = parseFloat (“3.14”);
c = parseInt (“ff”, 16);
1
3.14
255
functions
var w = 255;
x = w.toString(16);
y = w.toString(8);
z = w.toString(2);
 
"ff"
"377"
"11111111"
methods

Local and Global Variables

Variables have SCOPE. This means that a variable with global scope is defined through the entire region of the program, whereas a variable with local scope is only defined within the specified block of code. These blocks of code are usually within the body of a function. The local variable cannot be accessed in every part of the program.

JavaScript has a function to test if a variable is not a number. This can be done by: isNAN(myVaraible); This returns true or false. e.g.

<script>
var userInput = "";
userInput = window.prompt("enter Number",0);
intSum = 12 + userInput;

if (isNaN(intSum))
document.writeln("<h1> Invalid Input</h1>");
else
document.writeln( "<h1>The sum is " + intSum + "</h1>" );
</script>

Week 5 - Selection

Control stuctures adds decision making to a program. Common structures include:

  1. Conditional Statements using Selection
  2. Repetitive Statements using Iteration
  3. Object Statements using Recursion

In order to make decisions, an expression should evaluate to either true or false. The expression is a mixture of statements (1 + 2), variable (Catherine), literals (123), or operations (myString.length). Comparison/relational operators (greater than, less than, equal to, not equal to) can be used and logical operators (and, or, not).

Expression Table

An Arithmetic Statement JavaScript Equivalent
100 is greater than 10 100 > 10
2 is less than 0 2 < 0
4 equivalent to 4 4 = = 4
4 times 3 equivalent to 2 times 6 (4 * 3) = = (2 * 6)
3 less than 1 and 2 greater than 1 (3 < 1) && (2 > 1)
2 equivalent to 2 and 4 less than 400 (2 = = 2) && (4 < 400)
7 less than 8 or 4 less than 8 (7 < 8) || (4 < 8)

Relational Operators

Operation Symbol
equal to
= =
not equal to !=
greater than >
less than <
greater than or equal to >=
less than or equal to <=

Rules for Expressions

  • Simple expressions are made of pairs of statements, variables, literals, or operations joined by a relational operator.
  • Simple expression must evaluate to true or false
  • Compound expressions are made of pairs of simple expressions joined by a logical operator
  • The final evaluation of compound expression is determined by logical truth (see truth tables)

Conditional Expressions

If Statements

This is based on the idea if something false, then something else happens, e.g.

var x = 10;
if (x ==10) {
                document.write(“x is ten”);
               }
else {
                document.write(“x is not ten”);
       }

Nested IF Statements

var x = 10;
var y = 20;
if (x ==10) {
                document.write(“x is ten”);
                if(y== 20){
                document.write(“and y is twenty”);
                              }
               }
else {
               document.write(“x is not ten”);
               if(y== 20){
                             document.write(“and y is twenty”);
                            }
              }

Select Statements

var x = 12;
switch (x){
              case 12 : document.write ("the answer is twelve <br> ");
              case 13 : document.write ("the answer is thirteen<br>");
              case 14 : document.write ("the answer is fourteen<br>");
              default : document.write ("the answer not 12 13 or 14");
             }

Week 6