Notesale: Turn your study into money

Document Preview

Extracts from the notes are below, to see the PDF you'll receive please use the links above

---

TABLES
Steps to create table:
1
...

2
...
Add a set of rows
...

4
...
For each row add this number of either:
a) Table headings
...

b) Table data
...

...

2
...
- Indicates a table row
...
tags
...

...

5
...
- Indicates a table caption
Example:
XHTML code to produce the table:

...
... Should be within

Table 1: exam results

Name	Exam Grade
Mike	80
Mark	70
Rita	75
Rachel	87
Peter	65

General Syntax:

_______	_______
_______	_______

Merging Cells
 Table cells can span several columns or rows
 Cells can be given colspan and rowspan attributes whose value specifies the number of
rows or columns the cell should span
 Example:





Merges 3 columns for displaying data in
Merges 3 columns for displaying headings in
Merges 2 rows for displaying data in
Merges 3 rows for displaying heading in

tag attributes:
 border – sets the border around cells and the table in pixels
...

 cellpadding – sets the space between cells in pixels
...


CSS SELECTORS & COLOURS
How to add Style sheets to HTML?
Three ways to specify style: External, Document and Inline style sheets
...

 Recommended to use these style sheets
...
Example:

...
center {
text-align: center;
color: red;
}
Grouping selectors - Use of commas
h1, h2, p {
text-align: center;
color: red;
}

ID’s vs
...

 You can use multiple classes on the same element
...
Make the least important heading use a normal font weight and medium font size
h6 {font-weight:normal; font-size:medium}
2
...
Make all tags use the font family "Times New Roman"
* {font-family:"Times New Roman"}
4
...

p
...
Create a class, applicable to all tags, which will center those elements it is applied to
...
centered {text-align:center} To use this class:
6
...
In CSS, the term "box model" is
used when talking about design and layout
...

Borders
 The CSS border allows you to specify the style and color of an element's border
...

Example:
p
...
two {
border-style: solid;
border-width: medium;
}

Border Colour
The color can be set by:
 Name –i
...
"red"
 RGB - i
...
“rgb (255, 0, 0)" for colour red
...
e
...
one {
border-style: solid;
border-color: red;
}
p
...

 Padding property has four values - 25px 50px 75px 100px
 Individual sides: Can change top, right, left, bottom padding independently
...

Individual Sides:
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
Shorthand Property:
padding: 25px;
Margins
 Margin clears an area around an element (outside the border)
...

 Individual sides: Can change top, right, left, bottom margins independently
...

Individual sides:
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;

Shorthand Property:
margin: 25px 50px;
 top and bottom margins are 25px
 right and left margins are 50px
What is {margin: 0 auto?}?
 “auto” means the browser will automatically calculate a margin based on the box an
element lies inside
...
e
...

 Because of this, we can centre align a box horizontally using, for instance:
p {margin: 0 auto}
Sizes in the Box Model
 When calculating the size of an element, we must include:
 The size of the content area (which are controlled by width and height)
...


Margin Collapsing
 When two or more vertical margins meet, they will collapse into one single margin
...

 Remember that p {margin:10px} means that every paragraph has a top and bottom (and
left and right) margin of 10px – Four margins
...

 Putting this together, we have:
50px (height of paragraph 2) + 4 x 10px (four margins) = 90px
 Is the above correct? No
...

 Between the content of paragraphs 1 and 3 we have:
 The bottom margin of the 1st paragraph touching the top margin of the 2nd
paragraph - Margin collapse
...

 The bottom margin of the 2nd paragraph touching the top
 Margin of the 3rd paragraph
...
Single margin of 10px
...

 However, we can manually override this position using the CSS properties left, right,
top and bottom
...

 These determine the position of an element in relation to the corresponding coordinate
of some reference position

A positive value moves it inside the box where all four values are 0

e
...
p{left:20px} moves the left edge of an element 20 pixels to the right of the
left edge of its reference position
If we want to position an element, we can’t just change its coordinates, we also need to change
its position property
 By default this is set to static, in which no movement is possible
 p{left:20px} on its own has no effect!
If we want to move an element
...

Element A will remain there – its positioning is static
Element B has relative positioning
 It will be moved 5px from its default location
...

 This doesn’t exist – the paragraph is still static
 It will be 5px from the left of the body
Floated Elements
 Used to position two (or more) elements next to each other on a page
...

 We want to clear the float environment when we want to go back to normal flow
 Do this by setting the clear property to both:

Some flowing text

Some non-flowing text

div tag
Designed to separate sections of content:
 Tag type: container, block level tag
...

 Character data: Can contain character data
Is the following efficient?

We have IDs for lectures
 This allows us to style each individually
 But we want them all to have the same style (consistency)
 We want to be able to easily add
 Best to use a class for things like this

INTRODUCTION TO JAVASCRIPT
JavaScript is a dynamically typed language
...
The
program is type-checked as it is run, only failing when it tries to execute a statement which does
not meet the type rules
...
Dynamically typed language
A simple way to think of the difference between dynamically and statically typed languages is to
compare when incorrect programs will be rejected
...

How to add JavaScript to HTML?
To add internal JavaScript:

Dialog Boxes
 Dialog boxes are a simple way of prompting the user to interact with the program
...

 Types of dialog boxes:
 Alert
 Confirm
 Prompt
Alert Boxes
 An alert box is used if you want to make sure information comes through to the user
 When an alert box pops up, the user will have to click "OK" to proceed
Syntax:
alert("sometext")
Creating new lines
alert("An alert! \nWith a new line
...


Confirm Box
 Confirm box is often used if you want the user to choose whether to accept something
...

 Return: bool
 true for OK
 false for Cancel
Syntax:
confirm("question?")

Prompt Box
 Used if you want to get some information from the user
 When an alert box pops up, the user will have to enter information and click “OK” or
“Cancel” to proceed
...

 Concatenate the string "abc" with the string "def" then the result would be "abcdef"
 In JavaScript, we can do this with the method concat as follows:
var str1 = "abc";
var str2 = "def";
var str3 = str1
...
g
...

/* Ask the user what their name is and assign it to a variable so that we can work with it
...
*/
var greeting = "Hello "
...

Syntax:
for(startValue;stopCondition;increment){
code to be executed
}
startValue – set an initial variable value, i
...
var i =0
stopCondition – a logical statement which stops the loop if false, i
...
i<5
increment – change in variable value after the loop’s code is executed, i
...
i++
For Example:
var message = "The HTML header types are:\n"
for(i = 1;i<=6;i++){
var header = " ...
concat(header);
}
alert(message);
while Loop
The while loop is used when you want to stop after some condition is met
...
e
...
Prompts the user for their name
2
...

3
...

while(!name_confirmed){
//Ask for username
username = prompt("What is your name?","");
//Build confirmation message
var confirmation_message = "Your name has been set to "
...
Continue?");
//Ask user to confirm their name
name_confirmed = confirm(confirmation_message);
}
var greeting = "Hello "
...
We need a function definition which:
1
...
Specifies the information it needs to run
3
...
Specifies which information it returns
Function Syntax:
function fnName(input1,input2,
...

 The parameter list (input1,input2,
...

 return someValue; specifies that the value of the variable someValue should be returned
(if any)
Example:

No input required
...

function greet_user_by_name(username){
var greeting = "Hello "
...


Function Calls
 To run code, we need a function call
...

 If it returns a value, we can assign the result to a variable
...

 An object can have properties:
my_object
...
my_method(/*List of inputs here*/);
Creating custom objects
There are three main ways to create a new object in JavaScript:
1
...
Creating and modifying a blank object
3
...
This is a block level, container tag
Tags and their attributes


tags define the whole form object
...

 action – specifies URL of application called when the form is submitted
...

 tags define different ways to enter data to the form
...

 type – defines the appearance and behaviour of the input
...

 value – associates a value with a given option
...

What a form should look like:

Text Input
Used to enter a single line of text
Syntax:

Text Input:


Password Input
Used to enter a single line of text
...

Syntax:

Password:



Radio Buttons Input
Used to choose from a set of options
...

Value: a value assigned to each radio button
...


Check Boxes Input
Used to choose from a set of options
...

Syntax:
A
B
Where:
name – same name given to whole group of check boxes
...
Can be accessed with JavaScript
...

Only the selected option is displayed until the box is clicked on
Syntax:

Option 1
Option 2

tags define each possible selection within the menu
...

cols - Default starting columns of the text area
...
Sends data to server
...

FORMS
Accessing form data
Accessing form data from elements with only one possible value, for example, (text,
password, drop down menus and text areas
Useful Syntax’s:
1
...
getElementById("formID");
Assigns the form object with id = "formID" to a variable
...
var element = form
...

If there are multiple form elements with name = "elementName" assigns an array containing
them to a variable
...
var v = element
...


For radio buttons and check boxes we need other information
...
element
...
element[i]
The option of the element which is in position i
...
element[i]
...

Form Validation
 Form is checked for completeness
 Form data is checked for correct type
 Stops invalid data being sent
 Saves load on server
 To validate a form, we need access to its contents
 Can do this with JavaScript
Consider the form:

Input:

A
B

We want to use JavaScript to alert the user if form data is missing
...
getElementById("myForm")
...
value;
//Produce an alert if empty
if(text=="") {
alert("Text field empty");
}
}

To see if a radio button has been checked:
function checkRadio(){
//Assign the radio buttons to rdo
var rdo = document
...
rdo;
//Detect if a radio button has been checked
var chkd = false;
for(i=0;i ...
checked){chkd = true;}
}
//If not, produce an alert
if(!chkd){
alert("No radio buttons checked");
}
}
Could check both fields with the single function:
function validateForm(){
//Check if the text field is empty
checkText( );
//Check if a radio button has been selected
checkRadio( );
}
Submitting forms
A form can be made to return a function when the submit button is pressed
...

 If defined, the function “functionName” will be called
...
getElementById("formID");
We can access elements of the form by name
var element = form
...
value;
or the status of each checkbox:
element[i]

---

Title: Internet Computing (Web Design) - Beginners Guide
Description: The notes are aimed towards newcomers to the field of web design. The following topics are covered in the notes: 1. HTML tables & how to create them. 2. Merging cells 3. CSS Selectors & Colors 4. CSS Positioning & Practical CSS 5. Introduction to JavaScript 6. JavaScript functions 7. JavaScript objects & dynamic documents 8. HTML forms 9. Form validation

Buy These NotesPreview

• Become a Notesale Ambassador

• Ts and Cs
• Contact Us