Tag Archives: source

HTML & CSS

HTML & CSS Layout Template

You can use the code below to set up an HTML document with a CSS layout including header, footer, sidebar, horizontal navigation menu, and single-column main content area.

Here is a preview of what the template looks like. Click on the image to see a demo page.

 

You can copy and paste the source code below into your own HTML file and save it as yourfilename.html before viewing it in a browser.

<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My page title</title>
<!-- This is a basic HTML template with a CSS layout -->
<style>
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 color:#333
}
 
p {
 padding: 10px;
}
 
#wrapper {
 margin: 0 auto;
 width: 1000px;
}
 
#header {
 float: left;
 height: 75px;
 width: 1000px;
 background: #6352FF;
}
 
#menu {
 float: left;
 height: 40px;
 width: 1000px;
 background: #96C7FF;
}
 
#content {
 float: left;
 background: #FFFFFF;
 width: 850px;
}
 
#leftcolumn {
 background: #C9D8FF;
 width: 150px;
 float: left;
}
 
#footer {
 height: 40px;
 width: 1000px;
 background: #6352FF;
 clear: both;
}
 
ul#menutabs {
list-style: none;
margin: 0;
padding: 8px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap
}
ul#menutabs li {
display: inline;
margin: 0 3px;
}
ul#menutabs a {
text-decoration: none;
padding: 0 0 3px;
border-bottom: 2px solid #FFF;
color: #8D9091;
 }
ul#menutabs a#current {
border-color: #0024B5;
color:#0029CC
}
ul#menutabs a:hover {
border-color: #0024B5;
color: #666
}
 
 
</style>
</head>
<body>
 <div id="wrapper">
 <div id="header">
 <h1>This is the Header</h1>
 </div>
 <div id="menu">
 <ul id="menutabs">
 <li><a id="current" href="#">Home</a></li>
 <li><a href="link1.html">Link 1</a></li>
 <li><a href="link2.html">Link 2</a></li>
 <li><a href="link3.html">Link 3</a></li>
 <li><a href="link4.html">Link 4</a></li>
</ul>
 </div>
 <div id="leftcolumn">
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 </div>
 <div id="content">
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 </div>
 <div id="footer">
 <p>This is the Footer</p>
 </div>
 </div>
</body>
</html>
JavaScript, Video

For Loops

A for loop is a loop that can run a set number of times. For example, you could use a for loop with a counter to repeat a set of instructions 10 times. Or you could use a for loop to cycle through every letter in a string or every element in an array (see the next tutorial). Every repetition of the loop is called an iteration.

Watch the video below and then scroll down to view the code.

Take a look at the sample code below which shows how to use a counter in a for loop.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - For Loops</title>
 <script type="text/javascript">
 
 // A FOR loop has three parameters separated by a semi-colon
 // The first parameter tells JavaScript where to start counting (eg. 0)
 // The second parameter is when to end the loop (eg. when the counter is no longer less than 10)
 // The last parameter is how much to increment the counter by (eg. i++ would increment by 1 and i=i+3 would increment by 3)
 
 for(i=0;i<10;i++){
 // in this example, the counter i starts at 0 and finishes at 10
 // the counter goes up by 1 for every iteration of the loop
 // While the counter is less than 10, the following line of code inside the loop will run:
 document.write("This is line "+i+"<br/>"); 
 }
 
 </script>
 
</head>
<body>
 
</body>
</html>

Next tutorial: Looping through arrays (and strings)

JavaScript, Video

Do..while Loops

Unlike the regular while loop, a do..while loop will run once first and then check the condition before it runs again. The loop will always run at least once, even if the condition evaluates to false. This is an example of a post-test loop structure. On the other hand, a regular while loop that only runs while a condition evaluates to true is an example of a pre-test loop structure. Watch the video below, then scroll down the page to see the sample code explained.

Have  a look at the sample code below for the do..while loop (post-test loop structure).

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Do While Loops</title>
 <script type="text/javascript">
 
 // Unlike the regular WHILE loop, a DO WHILE loop will run once first and then check the condition
 // before it runs again. The loop will always run at least once, even if the condition evaluates to false.
 // This is an example of a post-test loop structure.
 
 var counter=1;
 
 do{
 document.write("This is line "+counter+"<br/>");
 counter++; //increase counter value by 1
 }while(counter<=10);
 
 // Change the counter to 11 and run the program again. What happens?
 // One line will still print because it runs the loop once before checking the condition.
 
 
 </script>
 
</head>
<body>
 
</body>
</html>

Next tutorial: For loops

JavaScript, Video

While loops

A while loop basically runs a piece of code while a test condition evaluates to true. A while loop can repeat a set of instructions (code) over and over again until the test condition evaluates to false and the loop breaks. The rest of the program will then continue running.

Watch the video below which explains a few different ways that you can use while loops in a program. You can also view it on YouTube by clicking here.

Take a look at the code below. A counter variable is given an initial value of 1. While the counter variable is less than or equal to 10, a new paragraph of text will display on the screen. The counter will increase by 1 for every iteration of the loop. The web page will display ten paragraphs before the loop ends (once the counter reaches the value of 11), and each paragraph will have the counter number value appended to the end of it.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - While Loops</title>
 <script type="text/javascript">
 
 var counter=1;
 
 while(counter<=10){
 document.write("This is paragraph "+counter+"</p>");
 counter++; // this is equivalent to counter = counter+1
 }
 
 
 </script>
 
</head>
<body>
 
</body>
</html>

In the example below, a string is used instead. The loop checks if the password is correct and then displays a message if it is correct. However, there is a problem with the code below…can you spot it? Scroll down to find out what is wrong with the code.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - While Loops</title>
 <script type="text/javascript">
 
 var password = "potato";
 
 while(password == "potato"){
 document.write("You have entered the correct password.");
 // more code can go here...
 }
 
 </script>
 
</head>
<body>
 
</body>
</html>

The problem with the snippet of code above is that the condition for the while loop will always evaluate to true, and so the loop will never stop running! This is called an infinite loop. The password variable is set to “potato” and while the password stored is equal to “potato”, the loop will run again and again. But there is no way to enter a different password…unless we allow for user input!

One way of allowing for user input is to use a JavaScript prompt such as the one used below. This time the while loop is set up a little differently.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - While Loops</title>
 <script type="text/javascript">
 
 var password = prompt("Enter a password");
 
 while(password != "potato"){
 password = prompt("You have entered the wrong password. Try again.");
 }
 
 document.write("You have entered the correct password! Welcome!");
 
 </script>
 
</head>
<body>
 
</body>
</html>

Tip: You can also use the break command to end a loop if a condition has evaluated to true. You could use an if statement inside a while a loop and then use the break; command to break the loop.

break;

Next tutorial: Do..While loops

JavaScript

Switch statements

A switch statement is like an IF statement but is neater when working with many conditions. Use the break statement at the end of each case so that the code runs efficiently. If you don’t use break, the program which keep checking through all conditions even if a match has already been found. If none of the conditions are met, then the ‘default’ case will run.

Take a look at the source code below and watch the video here to see switch statements in action.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Switch Statements</title>
 <script type="text/javascript">
 
 // A switch statement is like an IF statement but is neater when working with many conditions.
 // Use the break statement at the end of each case so that the code runs efficiently.
 // If you don't use break, the program which keep checking through all conditions even if a match has
 // already been found. If none of the conditions are met, then the 'default' case will run.
 
 var city="Sydney";
 
 switch(city){
 case "Melbourne":
 document.write("You are from Melbourne");
 break;
 case "Sydney":
 document.write("You are from Sydney");
 break;
 case "Perth":
 document.write("You are from Perth");
 break;
 case "Brisbane":
 document.write("You are from Brisbane");
 break;
 default:
 document.write("You don't live in a city I recognise.");
 }
 
 
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

Using And/Or Operators in If Statements

Using logical operators such as and/or allow a programmer to write complex if statements. For example, you can check if a number is greater than 10 AND is also less than 20 (both conditions have to evaluate to true for the code to run inside the if statement). Or, you can check if a number is less than 5 OR greater than 10 (only one condition has to evaluate to true for the code to run inside the if statement)

Logical operators:

  • The symbols && are used for the and operator in JavaScript
  • The || symbols are used for the or operator in JavaScript
  • A single exclamation mark ! can also be used as a not operator.

Check out the sample code below to see how these logical operators can be used to form complex if statements in JavaScript, and make sure you also watch the accompanying video here.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Nesting If Statements</title>
 <script type="text/javascript">
 
 // This is a better way than using nested if statements
 // You can use and/or operators in JS (known as logical operators)
 // The AND operator is &&
 // The OR operator is ||
 
 var firstName = "John";
 var lastName = "Smith";
 
 if(firstName=="John" && lastName=="Smith"){
 document.write("Hello, John Smith!");
 // The message above will only be displayed if firstName is John AND lastName is Smith.
 // Try using || instead of && and change the value of one of the variables. What happens?
 }
 
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

Nested If Statements

The sample code below shows how to use if statements inside other if statements (nested if statements). The video here explains all about nested if statements!

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Nesting If Statements</title>
 <script type="text/javascript">
 
 var age = 21;
 var maxAge = 30;
 var minAge = 18;
 
 // Below is an example of using if statements inside other if statements
 // This is called nested if statements.
 
 if(age>=minAge){
 if(age<=maxAge){
 document.write("You are within the accepted age range.");
 }
 else{
 document.write("You are above the accepted maximum age.");
 }
 }
 else{
 document.write("You are under the accepted minimum age.");
 }
 
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

If else statements

Often when using if statements, you will want to test more than just one condition. The sample code below explains how to do this. You can also watch the video here which runs through using if, else if, and else statements.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - If Else Statements</title>
 <script type="text/javascript">
 
 // You can have a single if statement (tests one condition)...
 // However, you can also have an IF statement that tests multiple conditions
 // Eg. You can have an if and an else statement (tests two conditions)
 // You can have an if statement, else if statements, and an else statement (tests several conditions)
 
 // if - is the first condition to test
 // else if - is used to test other conditions
 // else - will run a piece of code only if none of the other condition tests have evaluated to true
 
 var age = 16
 
 if(age>=18){
 document.write("You are old enough to vote.");
 }
 else if(age==17){
 document.write("You can vote after your next birthday.");
 }
 else{
 document.write("You cannot vote yet.");
 }
 
 // Make sure you don't confuse the = sign (used for assigning values to variables) for == (used for comparisons)
 
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

If statements

An ‘if statement’ is used to test a condition. If the test condition evaluates to true (Eg. x is less than y), then the code inside the if statement will run. If the test condition evaluates to false, then the code inside the if statement won’t run and the program will continue on. Take a look at the video here which explains if statements, and then try using the sample code below.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - If Statements</title>
 <script type="text/javascript">
 
 /* For an 'if' statement, the syntax should look like:
 
 if(condition to be tested){
 //run code here
 }
 
 */
 
 var age = 20 // declare the variable age
 
 if(age>=18){
 document.write("You are old enough to vote."); // this message only displays if age is greater than or equal to 18
 }
 
 /* Operators you can use include:
 == equal to
 != not equal to
 > greater than
 < less than
 >= greater than or equal to
 <= less than or equal to
 */
 
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

Finding the length of arrays (and strings)

Sometimes you might need to find out how many elements exist in an array (that is, the length of the array). The sample code below shows exactly how to do that, and it also shows you how to find the length of a string using pretty much the same method.

The video here also explains how to do this.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - More Arrays</title>
 <script type="text/javascript">
 
 var cars = new Array();
 
 cars[0]="Mitsubishi";
 cars[1]="Honda";
 cars[2]="Audi";
 
 // to find the length (number of elements) of an array we can use arrayname.length eg.:
 
 document.write(cars.length);
 
 /* 
 We could also use the length method on a string like this:
 
 var word = "hello";
 document.write(word.length);
 
 */
 
 
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

Arrays

Arrays are very useful in any programming language. When you use a simple variable, you can only store one value. For example age = 17 or name = “Harry”. But what if you want to store a list of related values such as all the names of members in a family? That is where arrays come in handy. Take a look at the syntax in the sample code below and make sure you watch the video on how to use arrays here, and also the video on finding the length of arrays and strings here.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Arrays</title>
 <script type="text/javascript">
 
 // how to declare and initialise an array when you know the values
 var words = new Array("hello","hi","howdy","gday");
 
 // how to print an element from an array
 document.write(words[2]);
 
 // you can also declare an array by specifying the number of elements in the array without adding them eg.
 var pets = new Array(4);
 // and then add values later eg.
 pets[0]= "dog";
 pets[1]= "cat";
 pets[2]= "fish";
 pets[3]= "bird";
 
 // you can also start off with an empty array eg.
 
 var cars = new Array();
 
 // and then add values later
 cars[0]="Mitsubishi";
 cars[1]="Honda";
 cars[2]="Audi";
 
 // Some array hints:
 // each value is an element in an array
 // array elements are accessed using an index which starts from 0
 
 
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

Functions with more than one parameter

In the previous sample code, we looked at how to use a parameter in a function. This sample code shows how to use multiple parameters. Make sure you also watch the video that explains functions and parameters here.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Functions with multiple parameters</title>
 <script type="text/javascript">
 
 // define the function and set the parameters separated by comma
 function addNumbers(num1, num2){
 // function code goes here, eg:
 var answer = num1 + num2;
 document.write(answer + "<br/>");
 }
 
 // call the function three times with different parameters
 addNumbers(2,6);
 addNumbers(3,1);
 addNumbers(30,14);
 // notice that there is a <br/> tag in the function, so a new line will be added each time the function is called
 
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

Functions with a parameter

The sample code shows how to make a function which uses a parameter.  A parameter is like a special variable which is used in a function to refer to a piece of data which is provided as input to the function. These pieces of data are also often called arguments.

The code below shows how to use just one argument. If you want to use more than one argument, see the sample code here. You can also watch the video which explains functions and parameters here.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Functions with parameters</title>
 <script type="text/javascript">
 
 /* functions can also use one or more parameters
 a parameter is like a special variable which is used in a function to
 refer to a piece of data which is provided as input to the function. These pieces of
 data are also often called arguments.
 */
 
 // define the function and set the parameter eg. message
 function saymessage(message){
 // function code goes here
 alert(message);
 }
 
 // call the function to be used and provide "Hello world" as an argument to the function.
 saymessage("Hello there");
 </script>
 
</head>
<body>
 
</body>
</html>
JavaScript

Events

This sample code snippet shows how to work with events (eg. onclick and onmouseover). It also shows how to use those annoying alert messages…but please, only use them for good! You will also be introduced to HTML form elements such as buttons.

Make sure you also check out the video here which explains how to use some of the other event types.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Events</title>
 <script type="text/javascript">
 
 // alert("Welcome to my web page"); would bring up an alert whenever the page loads
 // However, we will use a click event to load an alert message instead, and this will be in the body section of the html page
 
 </script>
 
</head>
<body>
 <form>
 <input type="button" value="click me" onclick="alert('You clicked me');"/>
 <input type="button" value="hover me" onmouseover="alert('You hovered over me');"/>
 
 </form>
 
 
</body>
</html>
JavaScript

Strings

Quite a lot is going to be covered in the source code snippet below. You might want to watch the video which explains all about working with strings by clicking here.

The sample code snippet below shows how to join (concatenate) strings, find the length of a string (the number of characters in a string), convert from integer to string, display specific characters in a string, split a string up and place each word in a separate array element, and convert string to uppercase and lowercase.

Don’t try all of this in one go. Have a go at one string operation at a time and only move on to the next one when you feel comfortable to.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Strings</title>
 <script type="text/javascript">
 
 var firstName = "Nicolas";
 var lastName = "Cage";
 
 // Concatenation means joining (eg. joining two strings together to form one string
 // Below, is an example of a concatenated string being held in a variable
 var joinednames = firstName + lastName;
 
 // Below, is an example of concatention with spaces added between words.
 document.write(firstName,' ',lastName,' ',"says \"hello\".");
 
 var fullName = firstName + ' ' + lastName; // this combines two variables and a space between the strings into a new variable
 
 document.write(fullName)
 
 var nameLength = fullName.length; // this calculates the length of the string as an integer
 document.write(nameLength);
 
 var age = 20;
 document.write(fullName + age); // this prints the name string and then the variable (no spaces) 
 
 var ageString = age.toString(); // this converts the age integer variable to a string variable
 document.write(ageString);
 
 /* To convert a string to an integer, the variable must firstly contain ony numbers. It can simply be multiplied by 1 to convert to an integer
 eg. newIntVariable = stringVariable * 1
 or you can use parseInt and parseFloat functions eg parseInt('77');
 */
 
 var message = 'Hello world!';
 document.write(message.indexOf('w')) // the indexOf function finds the index number of a character in a string
 document.write(message.charAt(8)) // this gives the character at index number 8
 document.write(message.length) // this will give the length of the string
 
 var messageArray = new Array();
 messageArray = message.split(' '); //this splits the words (where there is a space) into a new array
 document.write(messageArray[0],"</br>"); // this would return "Hello" (and a new line)
 document.write(messageArray[1]); // this would return "world!"
 
 document.write(message.substring(4,8)); //this will show anything between index number 4 and 8
 document.write(message.substr(4,8)); //substr is different to substring. this will show the 8 characters after index number 4.
 
 document.write(message.toUpperCase()); // converts string to uppercase
 document.write(message.toLowerCase()); // converts string to lowercase
 document.write("<b>",message.toUpperCase(),"</b>"); // this prints the uppercase string in bold using the HTML bold element <b>
 document.write("<h1>This is a heading</h1>"); // HTML elements can be put straight into a string
 </script>
 
</head>
<body>
 
 
</body>
</html>